feat: add useSynchronizedAnimation hook (#15)

Author: Tigge

README.md

@@ -93,6 +93,33 @@ const MyComponent = () => {
 
 </details>
 
+<details>
+  <summary>useClickOutside</summary>
+
+A hook that fires a callback when a click (pointerdown) was registered outside of a component. Outside is defined as outside of your react tree, which means that this works with portals.
+
+```tsx
+import { useDraggable } from 'react-hooks-shareable'
+
+const MyComponent = () => {
+  const handler = useClickOutside(e => {
+    console.log('Clicked outside!')
+  })
+
+  return (
+    <div onPointerDown={handler}>
+      <span>Clicks here is inside</span>
+      {ReactDOM.createPortal(
+        <span>Clicks here are also inside</span>,
+        portalContainer
+      )}
+    </div>
+  )
+}
+```
+
+</details>
+
 <details>
   <summary>useDeferredTrigger</summary>
 
@@ -152,44 +179,35 @@ const MyComponent = () => {
 </details>
 
 <details>
-  <summary>useClickOutside</summary>
+  <summary>useFocusDetection</summary>
 
-A hook that fires a callback when a click (pointerdown) was registered outside of a component. Outside is defined as outside of your react tree, which means that this works with portals.
+A hook which detects if the browser and your page is in focus.
 
 ```tsx
-import { useDraggable } from 'react-hooks-shareable'
+import { useFocusDetection } from 'react-hooks-shareable'
 
 const MyComponent = () => {
-  const handler = useClickOutside(e => {
-    console.log('Clicked outside!')
-  })
+  const hasFocus = useFocusDetection(1000)
 
-  return (
-    <div onPointerDown={handler}>
-      <span>Clicks here is inside</span>
-      {ReactDOM.createPortal(
-        <span>Clicks here are also inside</span>,
-        portalContainer
-      )}
-    </div>
-  )
+  return <span>{`User ${hasFocus ? : 'is' : 'is not'} focusing on this page`}</span>
 }
 ```
 
 </details>
 
 <details>
-  <summary>useFocusDetection</summary>
+  <summary>useHasOverflow</summary>
 
-A hook which detects if the browser and your page is in focus.
+A hook for checking if an element has overflow.
 
 ```tsx
-import { useFocusDetection } from 'react-hooks-shareable'
+import { useHasOverflow } from 'react-hooks-shareable'
+import { SomeComponent } from 'someComponentLibrary'
 
 const MyComponent = () => {
-  const hasFocus = useFocusDetection(1000)
+  const { hasOverflow, ref } = useHasOverflow()
 
-  return <span>{`User ${hasFocus ? : 'is' : 'is not'} focusing on this page`}</span>
+  return <SomeComponent ref={ref} hasOverflow={hasOverflow} />
 }
 ```
 
@@ -397,6 +415,37 @@ const MyComponent = () => {
 
 </details>
 
+<details>
+  <summary>useSynchronizedAnimation</summary>
+
+A hook for synchronizing web animations. The animations are synchronized to
+the `document.timeline`. This can for example be used to make spinners
+always be in sync with another, and over remounts.
+
+```css
+.animation {
+  animation: spin 4s linear infinite;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+```
+
+```tsx
+import { useSynchronizedAnimation } from 'react-hooks-shareable'
+
+const MyAnimation = () => {
+  const ref = useSynchronizedAnimation()
+
+  return <div className="animation" ref={ref} />
+}
+```
+
+</details>
+
 <details>
   <summary>useTrigger</summary>
 
@@ -494,21 +543,3 @@ const MyComponent = () => {
 ```
 
 </details>
-
-<details>
-  <summary>useHasOverflow</summary>
-
-A hook for checking if an element has overflow.
-
-```tsx
-import { useHasOverflow } from 'react-hooks-shareable'
-import { SomeComponent } from 'someComponentLibrary'
-
-const MyComponent = () => {
-  const { hasOverflow, ref } = useHasOverflow()
-
-  return <SomeComponent ref={ref} hasOverflow={hasOverflow} />
-}
-```
-
-</details>

src/index.ts

@@ -14,6 +14,7 @@ export * from './usePressed'
 export * from './useResetScroll'
 export * from './useScrollPosition'
 export * from './useSelection'
+export * from './useSynchronizedAnimation'
 export * from './useTrigger'
 export * from './useUserActive'
 export * from './useVisibleFocus'

src/useSynchronizedAnimation.ts

@@ -0,0 +1,11 @@
+import { useLayoutEffect, useRef } from 'react'
+
+export const useSynchronizedAnimation = (options?: GetAnimationsOptions) => {
+  const ref = useRef<HTMLElement>()
+  useLayoutEffect(() => {
+    ref.current
+      ?.getAnimations(options)
+      .forEach(a => (a.currentTime = document.timeline.currentTime))
+  }, [options])
+  return ref
+}