Demo: Add DomRef example

Author: Oblosys

apps/react-hook-tracer-demo/src/App.tsx

@@ -5,6 +5,7 @@ import * as contextDemo from './demos/ContextDemo'
 import * as demo from './demos/Demo'
 import * as counter from './demos/Counter'
 import * as reducer from './demos/Reducer'
+import * as domRef from './demos/DomRef'
 import { ItemSelector } from './ItemSelector'
 
 import './App.css'
@@ -14,6 +15,7 @@ const demoComponents = [
   { label: 'Context', component: contextDemo.Demo },
   { label: 'Counter', component: counter.Demo },
   { label: 'Reducer', component: reducer.Demo },
+  { label: 'DOM ref', component: domRef.Demo },
 ]
 
 const sessionStorageKeyBase = '@@react-hook-tracer-demo--persistent-state:'

apps/react-hook-tracer-demo/src/demos/DomRef.css

@@ -0,0 +1,32 @@
+.parent,
+.child {
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 4px 10px 4px 10px;
+  border-radius: 10px;
+}
+
+.parent .trace-panel,
+.child .trace-panel {
+  align-self: inherit;
+}
+
+.parent {
+  background-color: #ddd;
+}
+
+.parent input {
+  margin-top: 4px;
+}
+
+.child {
+  margin-top: 6px;
+  background-color: #eee;
+}
+
+.child input {
+  margin-top: 4px;
+  margin-bottom: 6px;
+}

apps/react-hook-tracer-demo/src/demos/DomRef.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import { forwardRef } from 'react'
+import { useRef, useTracer } from 'react-hook-tracer'
+
+import './DomRef.css'
+
+export const Demo = () => <Parent />
+
+const Parent = () => {
+  const { TracePanel } = useTracer()
+  const ref = useRef<HTMLInputElement>(null)
+  return (
+    <div className="parent">
+      <TracePanel />
+      <input type="button" value="Focus on child text field" onClick={() => ref.current?.focus()} />
+      <Child ref={ref} />
+    </div>
+  )
+}
+
+const Child = forwardRef<HTMLInputElement>((_, ref) => {
+  const { TracePanel } = useTracer()
+  return (
+    <div className="child">
+      <input type="text" ref={ref} />
+      <TracePanel />
+    </div>
+  )
+})
+
+Child.displayName = 'Child'