Blueprint

GuidesFoundationComponentsReleases
⌘K

useIsMotionReduced

useIsMotionReduced is a custom hook used to help detect the users motion preference.

Note

Both Chakra and Framer Motion expose hooks to read the user preference from CSS, but this should be the canonical hook used to determine the user's motion preference when building with the design system

Learn more about the API and its backgrounds.

Import


import { useIsMotionReduced } from '@hover/blueprint';

Return value

The useIsMotionReduced hook returns a boolean, indicating whether the user prefers reduced motion.

Keep in mind this API relies on the users browser support of window.matchMedia and will always return false if it is not supported or does not exist (e.g. during serverside rendering).

Usage


import { keyframes } from '@emotion/react';
import { Image, useIsMotionReduced } from '@hover/blueprint';
import logo from './logo.svg';
const spin = keyframes`
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
`;
function Example() {
const isMotionReduced = useIsMotionReduced();
const animation = isMotionReduced ? undefined : `${spin} infinite 20s linear`;
return <Image animation={animation} src={logo} {...props} />;
}