Hooks

useReducedMotion

Sand, når den besøgende har bedt systemet om mindre bevægelse.

Kilde

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,
  )
}

Installér

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

Med registret tilføjet (components.json)

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

Afhængigheder

Ingen ud over React og Tailwind.

Filer

use-reduced-motion.ts

GitHub use-reduced-motion.json Til din agent (MCP)