import React from 'react' ; import { getWindow , isBrowser } from '../helpers/window' ; returns example const QUERY = '(prefers-reduced-motion: reduce)' ; function usePrefersReducedMotion ( ) { if ( ! isBrowser ( ) ) { return 'no-preference' ; } const environment = getWindow ( ) ; const matches = environment . matchMedia ( QUERY ) ? environment . matchMedia ( QUERY ) . matches : false ; const [ prefersReducedMotion , setPrefersReducedMotion ] = React . useState < boolean > ( matches ) ; React . useEffect ( ( ) => { const mql = environment . matchMedia ( QUERY ) ; const listener = ( event ) => { setPrefersReducedMotion ( event . matches ) ; } ; if ( mql && mql . addListener ) { mql . addListener ( listener ) ; } return ( ) => { if ( mql && mql . removeListener ) { mql . removeListener ( listener ) ; } } ; } ) ; return prefersReducedMotion ? 'reduce' : 'no-preference' ; } export default usePrefersReducedMotion ;