useIsMotionReduced

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

Learn more about the API and its backgrounds.

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

Import

import { useIsMotionReduced } from '@hoverinc/design-system-react-web';

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 '@hoverinc/design-system-react-web';
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} />;
}

useDisclosure

useLatestCallback

Design System

Settings

useIsMotionReduced

Note

Import

Return value

Usage