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
Created
July 10, 2024 16:50
-
-
Save stipsan/0c0f839a27842249cada893e9fb7767b to your computer and use it in GitHub Desktop.
How to implement the `Sec-CH-Prefers-Reduced-Motion` header with `@sanity/ui`'s `usePrefersReducedMotion` hook
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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> | |
| ) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment