CODEWITHSUNDEEP
javascriptreactjs
emwhy
emwhy

Reputation: 113

Is there a way to detect if a user has animations disabled on their OS?

I'm writing a frontend application using React, and am rendering an animation on one of the components. If the user has animations disabled in their settings, I'd like to display a static image in its place. Is there a way to tell if animations have been disabled so I can do some conditional rendering?

Upvotes: 0

Views: 1087

Answers (1)

edemaine
edemaine

Reputation: 3130

@Phix gives the relevant standard.

To check in JavaScript as requested, you can use

const query = window.matchMedia(
  '(prefers-reduced-motion: reduce)');
if(query.matches) ... else ...

In React, you could use @react-hook/media-query as follows:

import {useMediaQuery} from '@react-hook/media-query'

const Component = () => {
  const matches = useMediaQuery(
    '(prefers-reduced-motion: reduce)');
  return matches ? ... : ...;
}

Upvotes: 6

Related Questions