Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useReducedMotion hook: guard the reference to window #17165

Merged
merged 1 commit into from
Aug 27, 2019
Merged

useReducedMotion hook: guard the reference to window #17165

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/compose/src/hooks/use-reduced-motion/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ import useMediaQuery from '../use-media-query';
*
* @type {boolean}
*/
const IS_IE = window.navigator.userAgent.indexOf( 'Trident' ) >= 0;
const IS_IE =
typeof window !== 'undefined' &&
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@koke - this is another place where we could take advantage of some sort of platform detection. It would be useful not only for detecting native iOS or Android.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think in this case we could have a separate native implementation, since react native 0.60 exposes those APIs in AccessibilityInfo

I can't test this on 0.60 right now, but something like this should do it:

function useReducedMotion() {
    const [ reducedMotion, setReducedMotion ] = useState( false );
    useEffect( () => {
        const updateReducedMotion = () => AccessibilityInfo.isReduceMotionEnabled().then( setReducedMotion );
        updateReducedMotion();
        AccessibilityInfo.addEventListener('reduceMotionChanged', updateReducedMotion);
        return () => {
            AccessibilityInfo.removeEventListener('reduceMotionChanged', updateReducedMotion);
        };
    } );
    
    return reducedMotion;
}

window.navigator.userAgent.indexOf( 'Trident' ) >= 0;

/**
* Hook returning whether the user has a preference for reduced motion.
Expand Down