improve examples in dev demo

Author: gabrieljablonski

src/App.tsx

@@ -1,21 +1,14 @@
 import { TooltipController as Tooltip } from 'components/TooltipController'
-import { TooltipProvider, TooltipWrapper, useTooltip } from 'components/TooltipProvider'
+import { TooltipProvider, TooltipWrapper } from 'components/TooltipProvider'
 import { useEffect, useRef, useState } from 'react'
 import styles from './styles.module.css'
 
 function WithProviderMinimal() {
-  const ref = useRef<HTMLButtonElement>(null)
-
   return (
     <section style={{ marginTop: '100px' }}>
       <p>
-        <TooltipWrapper forwardRef={ref} place="bottom" content="Shared Global Tooltip">
-          <button
-            // this will not work, must use wrapper `forwardRef`
-            ref={ref}
-          >
-            Minimal 1
-          </button>
+        <TooltipWrapper place="bottom" content="Shared Global Tooltip">
+          <button>Minimal 1</button>
         </TooltipWrapper>
         <TooltipWrapper place="right" content="Shared Global Tooltip">
           <button>Minimal 2</button>
@@ -26,57 +19,48 @@ function WithProviderMinimal() {
   )
 }
 
-function WithProviderFullControl() {
-  const { attach, detach } = useTooltip()
-  const { attach: attach1, detach: detach1 } = useTooltip()('tooltip-1')
-  const { attach: attach2, detach: detach2 } = useTooltip()('tooltip-2')
-  const buttonRef1 = useRef<HTMLButtonElement>(null)
-  const buttonRef2 = useRef<HTMLButtonElement>(null)
-  const buttonRef3 = useRef<HTMLButtonElement>(null)
-  const buttonRef4 = useRef<HTMLButtonElement>(null)
-  const buttonRef5 = useRef<HTMLButtonElement>(null)
-  const buttonRef6 = useRef<HTMLButtonElement>(null)
+function WithProviderMultiple() {
+  return (
+    <section style={{ marginTop: '100px' }}>
+      <p>
+        <TooltipWrapper tooltipId="tooltip-1" place="bottom">
+          <button>Multiple 1</button>
+        </TooltipWrapper>
+        <TooltipWrapper tooltipId="tooltip-2" place="right">
+          <button>Multiple 2</button>
+        </TooltipWrapper>
+      </p>
+      <Tooltip id="tooltip-1" content="Tooltip 1" />
+      <Tooltip id="tooltip-2" content="Tooltip 2" />
+    </section>
+  )
+}
+
+function WithProviderForwardRef() {
+  // if access to the element's ref is needed, `TooltipWrapper.forwardRef` must be used
+  const ref = useRef<HTMLButtonElement>(null)
 
   useEffect(() => {
-    attach(buttonRef1, buttonRef2)
-    attach1(buttonRef3, buttonRef4)
-    attach2(buttonRef5, buttonRef6)
-    return () => {
-      detach(buttonRef1, buttonRef2)
-      detach1(buttonRef3, buttonRef4)
-      detach2(buttonRef5, buttonRef6)
-    }
-  }, [])
+    // eslint-disable-next-line no-console
+    console.log('Ref can still be accessed: ', ref.current)
+  })
 
   return (
     <section style={{ marginTop: '100px' }}>
       <p>
-        <button ref={buttonRef1} data-tooltip-content="Shared Global Tooltip">
-          Provider 1
-        </button>
-        <button ref={buttonRef2} data-tooltip-content="Shared Global Tooltip">
-          Provider 2
-        </button>
-      </p>
-      <p>
-        <button ref={buttonRef3} data-tooltip-content="Shared Tooltip 1">
-          Provider 3
-        </button>
-        <button ref={buttonRef4} data-tooltip-content="Shared Tooltip 1">
-          Provider 4
-        </button>
-      </p>
-      <p>
-        <button ref={buttonRef5} data-tooltip-content="Shared Tooltip 2">
-          Provider 5
-        </button>
-        <button ref={buttonRef6} data-tooltip-content="Shared Tooltip 2">
-          Provider 6
-        </button>
+        <TooltipWrapper forwardRef={ref} place="bottom" content="Shared Global Tooltip">
+          <button
+            // this will not work, must use `forwardRef` from wrapper
+            ref={ref}
+          >
+            Forward ref 1
+          </button>
+        </TooltipWrapper>
+        <TooltipWrapper place="right" content="Shared Global Tooltip">
+          <button>Forward ref 2</button>
+        </TooltipWrapper>
       </p>
       <Tooltip />
-      <Tooltip id="tooltip-1" />
-      <Tooltip id="tooltip-2" />
     </section>
   )
 }
@@ -155,7 +139,10 @@ function App() {
         <WithProviderMinimal />
       </TooltipProvider>
       <TooltipProvider>
-        <WithProviderFullControl />
+        <WithProviderMultiple />
+      </TooltipProvider>
+      <TooltipProvider>
+        <WithProviderForwardRef />
       </TooltipProvider>
     </main>
   )