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

)

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",

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.

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) => {

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.

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) {

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

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'

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 () => {

packages/shared/src/hooks/useIsomorphicLayoutEffect.native.ts

@@ -0,0 +1,3 @@
+import { useLayoutEffect } from 'react'
+
+export { useLayoutEffect as useIsomorphicLayoutEffect }

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

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
+}

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()
+ })
+})

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
+}

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'