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'
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 returnfalse
if it is not supported or does not exist (e.g. during serverside rendering).
Usage#
import { Image, 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} />}