hooks - useReducedMotion

View on GitHub

The useReducedMotion hook can be used to determine if the visitor has requested that unnecessary motion be disabled for accessibility reasons.

function Example() {
    const { reducedMotion } = useReducedMotion();

    if (!reducedMotion) {
      return <Video src="https://test-videos.co.uk/vids/jellyfish/mp4/h264/360/Jellyfish_360_10s_1MB.mp4" autoPlay muted />;
    } else {
      return <img src="https://placehold.co/300x200" alt="Fallback Image" />;
    }
}