useReducedMotion

Detect if user prefers reduced motion.

Import

import { useReducedMotion } from '@tidbcloud/uikit'

Usage

useReducedMotion detects if user prefers to reduce motion using the (prefers-reduced-motion: reduce) media query.

import { useReducedMotion } from '@tidbcloud/uikit'
import { Transition } from '@tidbcloud/uikit'
 
function Demo() {
  const reduceMotion = useReducedMotion()
 
  return (
    <Transition mounted={true} transition={reduceMotion ? 'fade' : 'slide-up'} duration={reduceMotion ? 0 : 200}>
      {(styles) => <div style={styles}>Content</div>}
    </Transition>
  )
}

API

The hook relies on window.matchMedia() API and will return false if the API is not available (for example, during server-side rendering), unless the initial value is provided.

import { useReducedMotion } from '@tidbcloud/uikit'
 
// Provide initial value for SSR
const reduceMotion = useReducedMotion(true)

Definition

interface UseMediaQueryOptions {
  getInitialValueInEffect: boolean
}
 
function useReducedMotion(initialValue?: boolean, options?: UseMediaQueryOptions): boolean

useOrientation useResizeObserver