import { Meta } from "@storybook/blocks";

<Meta title="Hooks/use-prefers-reduced-motion" />

# use-prefers-reduced-motion hook

Detect whether or not a system preference is set to reduce motion.

## Purpose

The use-prefers-reduced-motion hook uses a
[CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)
to detect if a system-level preference has been set by the user to reduce the
amount of non-essential motion.

This hook can be used to allow people to “opt-out” of transitions and animations
that they may find disorienting or distracting.

## Usage

```jsx
import React from "react";
import { usePrefersReducedMotion } from "@conveyorhq/arrow-ds";

export const Component = () => {
  const prefersReducedMotion = usePrefersReducedMotion();

  return (
    <Box className={prefersReducedMotion ? "no-animation" : "animation"}>
      The CSS animation will run if no preference is set.
    </Box>
  );
};
```

In combination with `react-spring`

```jsx
import React from "react";
import { animated, useSpring } from "@react-spring/web";
import { usePrefersReducedMotion } from "@conveyorhq/arrow-ds";

export const Component = () => {
  const prefersReducedMotion = usePrefersReducedMotion();
  const [viz, setViz] = React.useState(false);
  const props = useSpring({
    opacity: viz ? 1 : 0,
    immediate: prefersReducedMotion,
  });

  return (
    <animated.div style={opacity}>
      The opacity will transition if no preference is set.
    </animated.div>
  );
};
```

## API

This hook accepts no props.