import * as React from 'react' ; const REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)' ; export const isRenderingOnServer = ( ( ) => { if ( typeof window == 'undefined' || ! window . location || ! window . location . href || ! window . matchMedia ) { return true ; } return Boolean ( new URL ( window . location . href ) . searchParams . get ( 'eyes-storybook' ) ) ; } ) ( ) ; const getMediaQueryList = ( ) : { matches : boolean ; addListener : Function ; removeListener : Function ; } => { if ( isRenderingOnServer ) { return { matches : true , addListener : ( ) => { } , removeListener : ( ) => { } , } ; } return window . matchMedia ( REDUCED_MOTION_QUERY ) ; } ; export function useReducedMotion ( ) { const [ prefersReducedMotion , setPrefersReducedMotion ] = React . useState ( getMediaQueryList ( ) . matches ) ; React . useEffect ( ( ) : ( ( ) => void ) => { const mediaQueryList = getMediaQueryList ( ) ; const handleChange = ( ) : void => { setPrefersReducedMotion ( mediaQueryList . matches ) ; } ; mediaQueryList . addListener ( handleChange ) ; return ( ) => { mediaQueryList . removeListener ( handleChange ) ; } ; } , [ ] ) ; return prefersReducedMotion ; }