import React from 'react' ; const QUERY = '(prefers-reduced-motion: no-preference)' ; const isRenderingOnServer = typeof window === 'undefined' ; const getInitialState = ( ) => { return isRenderingOnServer ? true : ! window . matchMedia ( QUERY ) . matches ; } ; function returns { boolean } export function usePrefersReducedMotion ( ) { const [ prefersReducedMotion , setPrefersReducedMotion ] = React . useState ( getInitialState ) ; React . useEffect ( ( ) => { const mediaQueryList = window . matchMedia ( QUERY ) ; const listener = ( event ) => { setPrefersReducedMotion ( ! event . matches ) ; } ; mediaQueryList . addListener ( listener ) ; return ( ) => { mediaQueryList . removeListener ( listener ) ; } ; } , [ ] ) ; return prefersReducedMotion ; }