How to implement the `Sec-CH-Prefers-Reduced-Motion` header with `@sanity/ui`'s `usePrefersReducedMotion` hook

README.md

This example is using Remix.

More information on the header: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion

_index.tsx

// app/routes/_index.tsx

import type {HeadersFunction, LoaderFunctionArgs} from '@remix-run/node'
import {json} from '@remix-run/node'
import {useLoaderData} from '@remix-run/react'
import {usePrefersReducedMotion} from '@sanity/ui'

export const headers: HeadersFunction = () => ({
  'Accept-CH': 'Sec-CH-Prefers-Reduced-Motion',
  'Vary': 'Sec-CH-Prefers-Reduced-Motion',
  'Critical-CH': 'Sec-CH-Prefers-Reduced-Motion',
})

export async function loader({request}: LoaderFunctionArgs) {
  const prefersReducedMotionHeader = request.headers.get(
    'Sec-CH-Prefers-Reduced-Motion',
  ) as unknown as 'no-preference' | 'reduce' | null
  return json({
    prefersReducedMotionHeader,
    prefersReducedMotionServerSnapshot: prefersReducedMotionHeader === 'reduce',
  })
}

export default function Index() {
  const {prefersReducedMotionHeader, prefersReducedMotionServerSnapshot} =
    useLoaderData<typeof loader>()
  const prefersReducedMotion = usePrefersReducedMotion(() => prefersReducedMotionServerSnapshot)

  useEffect(() => {
    console.count(`prefersReducedMotion: ${prefersReducedMotion}`)
  }, [prefersReducedMotion])

  return (
    <pre>
      <code
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(
            {
              prefersReducedMotionHeader,
              prefersReducedMotionServerSnapshot,
              prefersReducedMotion,
            },
            null,
            2,
          ),
        }}
      />
    </pre>
  )
}