Hooks

useReducedMotion

Wahr, wenn die Person im System weniger Bewegung eingestellt hat.

Quellcode

use-reduced-motion.ts

import { useSyncExternalStore } from 'react'

const QUERY = '(prefers-reduced-motion: reduce)'

function subscribe(onChange: () => void) {
  const mq = window.matchMedia(QUERY)
  mq.addEventListener('change', onChange)
  return () => mq.removeEventListener('change', onChange)
}

/** True when the visitor has asked the system for less motion. */
export function useReducedMotion() {
  return useSyncExternalStore(
    subscribe,
    () => window.matchMedia(QUERY).matches,
    () => false,
  )
}

Installieren

$ npx shadcn@latest add https://mikkelmanniche.dk/lab/r/use-reduced-motion.json

Mit eingetragener Registry (components.json)

$ npx shadcn@latest add @manniche/use-reduced-motion

Abhängigkeiten

Keine außer React und Tailwind.

Dateien

use-reduced-motion.ts

GitHub use-reduced-motion.json Für deinen Agenten (MCP)