feat: add useReducedMotion hook & export useIsomorphicLayout hook (pmndrs#1886)

joshuaellis · web-flow · commit 3365ceaad119 · 2022-07-13T08:52:15.000+01:00
diff --git a/.yarn/cache/@testing-library-react-npm-13.0.0-b12618437f-75c2348cff.zip b/.yarn/cache/@testing-library-react-npm-13.0.0-b12618437f-75c2348cff.zip
diff --git a/.yarn/cache/@testing-library-react-npm-13.2.0-a1a70b5e81-29f4a97c93.zip b/.yarn/cache/@testing-library-react-npm-13.2.0-a1a70b5e81-29f4a97c93.zip
diff --git a/.yarn/cache/@types-react-dom-npm-17.0.14-d1c78a4e4e-b54cd0ef57.zip b/.yarn/cache/@types-react-dom-npm-17.0.14-d1c78a4e4e-b54cd0ef57.zip
diff --git a/package.json b/package.json
@@ -76,7 +76,7 @@
     "@react-three/fiber": "^7.0.26",
     "@testing-library/cypress": "^8.0.2",
     "@testing-library/jest-dom": "^5.16.3",
-    "@testing-library/react": "^13.0.0",
+    "@testing-library/react": "^13.2.0",
     "@types/jest": "^27.4.0",
     "@types/lodash.clamp": "^4.0.6",
     "@types/lodash.shuffle": "^4.2.6",
diff --git a/packages/animated/src/withAnimated.tsx b/packages/animated/src/withAnimated.tsx
@@ -10,7 +10,7 @@ import {
   FluidValue,
   addFluidObserver,
   removeFluidObserver,
-  useLayoutEffect,
+  useIsomorphicLayoutEffect,
 } from '@react-spring/shared'
 import { ElementType } from '@react-spring/types'
 
@@ -66,7 +66,7 @@ export const withAnimated = (Component: any, host: HostConfig) => {
     const observer = new PropsObserver(callback, deps)
 
     const observerRef = useRef<PropsObserver>()
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
       observerRef.current = observer
 
       // Observe the latest dependencies.
diff --git a/packages/core/src/hooks/useChain.ts b/packages/core/src/hooks/useChain.ts
@@ -1,4 +1,4 @@
-import { each, useLayoutEffect } from '@react-spring/shared'
+import { each, useIsomorphicLayoutEffect } from '@react-spring/shared'
 import { SpringRef } from '../SpringRef'
 import { callProp } from '../helpers'
 
@@ -7,7 +7,7 @@ export function useChain(
   timeSteps?: number[],
   timeFrame = 1000
 ) {
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (timeSteps) {
       let prevDelay = 0
       each(refs, (ref, i) => {
diff --git a/packages/core/src/hooks/useSprings.ts b/packages/core/src/hooks/useSprings.ts
@@ -6,7 +6,7 @@ import {
   usePrev,
   useOnce,
   useForceUpdate,
-  useLayoutEffect,
+  useIsomorphicLayoutEffect,
 } from '@react-spring/shared'
 
 import {
@@ -166,14 +166,14 @@ export function useSprings(
 
   // New springs are created during render so users can pass them to
   // their animated components, but new springs aren't cached until the
-  // commit phase (see the `useLayoutEffect` callback below).
+  // commit phase (see the `useIsomorphicLayoutEffect` callback below).
   const springs = ctrls.current.map((ctrl, i) => getSprings(ctrl, updates[i]))
 
   const context = useContext(SpringContext)
   const prevContext = usePrev(context)
   const hasContext = context !== prevContext && hasProps(context)
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     layoutId.current++
 
     // Replace the cached controllers.
diff --git a/packages/core/src/hooks/useTrail.ts b/packages/core/src/hooks/useTrail.ts
@@ -1,4 +1,4 @@
-import { each, is, useLayoutEffect } from '@react-spring/shared'
+import { each, is, useIsomorphicLayoutEffect } from '@react-spring/shared'
 
 import { Valid } from '../types/common'
 import { PickAnimated, SpringValues, AsyncResult } from '../types'
@@ -62,7 +62,7 @@ export function useTrail(
 
   const ref = passedRef ?? result[1]
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     each(ref.current, (ctrl, i) => {
       const parent = ref.current[i + (reverse ? 1 : -1)]
       if (parent) {
diff --git a/packages/core/src/hooks/useTransition.tsx b/packages/core/src/hooks/useTransition.tsx
@@ -8,7 +8,7 @@ import {
   useOnce,
   usePrev,
   each,
-  useLayoutEffect,
+  useIsomorphicLayoutEffect,
 } from '@react-spring/shared'
 
 import {
@@ -98,7 +98,7 @@ export function useTransition(
   const usedTransitions = useRef<TransitionState[] | null>(null)
   const prevTransitions = reset ? null : usedTransitions.current
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     usedTransitions.current = transitions
   })
 
@@ -139,7 +139,7 @@ export function useTransition(
 
   // Expired transitions that need clean up.
   const expired = (reset && usedTransitions.current) || []
-  useLayoutEffect(() =>
+  useIsomorphicLayoutEffect(() =>
     each(expired, ({ ctrl, item, key }) => {
       detachRefs(ctrl, ref)
       callProp(onDestroyed, item, key)
@@ -358,7 +358,7 @@ export function useTransition(
   const hasContext = context !== prevContext && hasProps(context)
 
   // Merge the context into each transition.
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (hasContext) {
       each(transitions, t => {
         t.ctrl.start({ default: context })
@@ -378,7 +378,7 @@ export function useTransition(
     }
   })
 
-  useLayoutEffect(
+  useIsomorphicLayoutEffect(
     () => {
       /*
        * if exitingTransitions.current has a size it means we're exiting before enter
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -12,7 +12,11 @@ export { SpringRef } from './SpringRef'
 export { FrameValue } from './FrameValue'
 export { Interpolation } from './Interpolation'
 export { BailSignal } from './runAsync'
-export { createInterpolator } from '@react-spring/shared'
+export {
+  createInterpolator,
+  useIsomorphicLayoutEffect,
+  useReducedMotion,
+} from '@react-spring/shared'
 export { inferTo } from './helpers'
 
 export * from './types'
diff --git a/packages/shared/src/hooks/useIsMounted.ts b/packages/shared/src/hooks/useIsMounted.ts
@@ -1,9 +1,9 @@
 import { useRef } from 'react'
-import { useLayoutEffect } from './useLayoutEffect'
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
 
 export const useIsMounted = () => {
   const isMounted = useRef(false)
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     isMounted.current = true
 
     return () => {
diff --git a/packages/shared/src/hooks/useIsomorphicLayoutEffect.native.ts b/packages/shared/src/hooks/useIsomorphicLayoutEffect.native.ts
@@ -0,0 +1,3 @@
+import { useLayoutEffect } from 'react'
+
+export { useLayoutEffect as useIsomorphicLayoutEffect }
diff --git a/packages/shared/src/hooks/useIsomorphicLayoutEffect.ts b/packages/shared/src/hooks/useIsomorphicLayoutEffect.ts
@@ -0,0 +1,12 @@
+import { useEffect, useLayoutEffect } from 'react'
+
+import { isSSR } from '../helpers'
+
+/**
+ * Use this to read layout from the DOM and synchronously
+ * re-render if the isSSR returns true. Updates scheduled
+ * inside `useIsomorphicLayoutEffect` will be flushed
+ * synchronously in the browser, before the browser has
+ * a chance to paint.
+ */
+export const useIsomorphicLayoutEffect = isSSR() ? useEffect : useLayoutEffect
diff --git a/packages/shared/src/hooks/useLayoutEffect.native.ts b/packages/shared/src/hooks/useLayoutEffect.native.ts
diff --git a/packages/shared/src/hooks/useLayoutEffect.ts b/packages/shared/src/hooks/useLayoutEffect.ts
diff --git a/packages/shared/src/hooks/useReducedMotion.native.ts b/packages/shared/src/hooks/useReducedMotion.native.ts
@@ -0,0 +1,40 @@
+import { useState } from 'react'
+import { AccessibilityInfo } from 'react-native'
+
+import { assign } from '../globals'
+
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.native'
+
+/**
+ * Returns `boolean` or `null`, used to automatically
+ * set skipAnimations to the value of the user's
+ * `prefers-reduced-motion` query.
+ *
+ * The return value, post-effect, is the value of their prefered setting
+ */
+export const useReducedMotion = () => {
+  const [reducedMotion, setReducedMotion] = useState<boolean | null>(null)
+
+  useIsomorphicLayoutEffect(() => {
+    const handleMediaChange = (isReducedMotion: boolean) => {
+      setReducedMotion(isReducedMotion)
+
+      assign({
+        skipAnimation: isReducedMotion,
+      })
+    }
+
+    AccessibilityInfo.isReduceMotionEnabled().then(handleMediaChange)
+
+    const motionSubscription = AccessibilityInfo.addEventListener(
+      'reduceMotionChanged',
+      handleMediaChange
+    )
+
+    return () => {
+      motionSubscription.remove()
+    }
+  }, [])
+
+  return reducedMotion
+}
diff --git a/packages/shared/src/hooks/useReducedMotion.test.ts b/packages/shared/src/hooks/useReducedMotion.test.ts
@@ -0,0 +1,91 @@
+import { act, renderHook } from '@testing-library/react'
+
+import { useReducedMotion } from './useReducedMotion'
+
+describe('useReducedMotion', () => {
+  let EVENTS: Record<string, MediaQueryHandler> = {}
+
+  const removeEventListenerMock = jest.fn()
+
+  type MediaQueryHandler = (mediaQuery: typeof mqDefaults) => void
+
+  const mqDefaults = {
+    matches: false,
+    onchange: null,
+    addEventListener: (name: string, handle: MediaQueryHandler) => {
+      EVENTS[name] = handle
+    },
+    removeEventListener: removeEventListenerMock,
+  }
+
+  afterEach(() => {
+    // reset events
+    EVENTS = {}
+
+    jest.clearAllMocks()
+  })
+
+  it('returns true if "Reduce motion" is enabled', async () => {
+    window.matchMedia = jest.fn().mockImplementation(query => {
+      return {
+        ...mqDefaults,
+        matches: true,
+        media: query,
+      }
+    })
+
+    const { result } = renderHook(useReducedMotion)
+
+    expect(result.current).toBe(true)
+  })
+
+  it('returns false if "Reduce motion" is disabled', async () => {
+    window.matchMedia = jest.fn().mockImplementation(query => {
+      return {
+        ...mqDefaults,
+        media: query,
+      }
+    })
+
+    const { result } = renderHook(useReducedMotion)
+
+    expect(result.current).toBe(false)
+  })
+
+  it('handles change of "prefers-reduce-motion" media query value', async () => {
+    window.matchMedia = jest.fn().mockImplementation(query => {
+      return {
+        ...mqDefaults,
+        media: query,
+      }
+    })
+
+    const { result } = renderHook(useReducedMotion)
+
+    expect(result.current).toBe(false)
+
+    act(() => {
+      EVENTS.change({
+        ...mqDefaults,
+        matches: true,
+      })
+    })
+
+    expect(result.current).toBe(true)
+  })
+
+  it('successfully removes listener on unmount', () => {
+    window.matchMedia = jest.fn().mockImplementation(query => {
+      return {
+        ...mqDefaults,
+        media: query,
+      }
+    })
+
+    const { unmount } = renderHook(useReducedMotion)
+
+    unmount()
+
+    expect(removeEventListenerMock).toHaveBeenCalled()
+  })
+})
diff --git a/packages/shared/src/hooks/useReducedMotion.ts b/packages/shared/src/hooks/useReducedMotion.ts
@@ -0,0 +1,37 @@
+import { useState } from 'react'
+
+import { assign } from '../globals'
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
+
+/**
+ * Returns `boolean` or `null`, used to automatically
+ * set skipAnimations to the value of the user's
+ * `prefers-reduced-motion` query.
+ *
+ * The return value, post-effect, is the value of their prefered setting
+ */
+export const useReducedMotion = () => {
+  const [reducedMotion, setReducedMotion] = useState<boolean | null>(null)
+
+  useIsomorphicLayoutEffect(() => {
+    const mql = window.matchMedia('(prefers-reduced-motion)')
+
+    const handleMediaChange = (e: MediaQueryListEvent | MediaQueryList) => {
+      setReducedMotion(e.matches)
+
+      assign({
+        skipAnimation: e.matches,
+      })
+    }
+
+    handleMediaChange(mql)
+
+    mql.addEventListener('change', handleMediaChange)
+
+    return () => {
+      mql.removeEventListener('change', handleMediaChange)
+    }
+  }, [])
+
+  return reducedMotion
+}
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
@@ -15,7 +15,8 @@ export * from './hooks/useForceUpdate'
 export * from './hooks/useMemoOne'
 export * from './hooks/useOnce'
 export * from './hooks/usePrev'
-export * from './hooks/useLayoutEffect'
+export * from './hooks/useIsomorphicLayoutEffect'
+export * from './hooks/useReducedMotion'
 
 export * from './fluids'
 
diff --git a/yarn.lock b/yarn.lock
