@sanity/ui
Version:
The Sanity UI components.
17 lines (15 loc) • 1.09 kB
text/typescript
import {useMatchMedia} from './useMatchMedia'
/**
* Returns true if motion should be reduced
*
* @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
*
* If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
* Chrome supports reading the `prefers-reduced-motion` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion
* @example https://gist.github.com/stipsan/0c0f839a27842249cada893e9fb7767b
*
* @public
*/
export function usePrefersReducedMotion(getServerSnapshot = () => false): boolean {
return useMatchMedia('(prefers-reduced-motion: reduce)', getServerSnapshot)
}