usePrefersReducedMotion

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

Learn more about the API and its backgrounds.

Import#

import { usePrefersReducedMotion } from "@chakra-ui/react"

import { usePrefersReducedMotion } from "@chakra-ui/react"

Return value#

The usePrefersReducedMotion 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 {
  Image,
  ImageProps,
  keyframes,
  usePrefersReducedMotion,
} from "@chakra-ui/react"
import logo from "./logo.svg"

const spin = keyframes`
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
`

function Example() {
  const prefersReducedMotion = usePrefersReducedMotion()

  const animation = prefersReducedMotion
    ? undefined
    : `${spin} infinite 20s linear`

  return <Image animation={animation} src={logo} {...props} />
}

import {
  Image,
  ImageProps,
  keyframes,
  usePrefersReducedMotion,
} from "@chakra-ui/react"
import logo from "./logo.svg"
const spin = keyframes`
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
`
function Example() {
  const prefersReducedMotion = usePrefersReducedMotion()
  const animation = prefersReducedMotion
    ? undefined
    : `${spin} infinite 20s linear`
  return <Image animation={animation} src={logo} {...props} />
}

Edit this page

usePrefersReducedMotion

.css-12m0k8p{pointer-events:auto;}Import.css-1l2j62r{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-1l2j62r:focus,.css-1l2j62r[data-focus]{opacity:1;box-shadow:0 0 0 3px rgba(66, 153, 225, 0.6);}#

Return value#

Usage#

Import#