使用偏好减少运动

反应 用户运动偏好签名的钩子 .

开始

QQ 快速启动

npm install @anatoliygatt/use-prefers-reduced-motion

import { usePrefersReducedMotion } from '@anatoliygatt/use-prefers-reduced-motion';

function Example() {
  const prefersReducedMotion = usePrefersReducedMotion();
  return (
    <div
      className={`box ${
        prefersReducedMotion ? 'fade-in' : 'fade-in-and-scale-up'
      }`}
    />
  );
}

现场直播

使用服务器侧渲染( SSR)

像"Next.js"和"Gatsby"这样的框架利用了服务器侧渲染,这意味着HTML在发送到浏览器之前的某个时候是被预发的. 当我们第一次制作反应组件树时,我们不知道用户是否更喜欢减动.

它可能导致水合过程中加分不匹配. 为了防止这种情况,我们需要制定 ssr 选项 usePrefersReducedMotion() 钩入 true,像这样:

usePrefersReducedMotion({ ssr: true });

这将保证在原始服务器渲染和第一个客户端渲染之间不会出现标记不匹配,但是,我们必须作出妥协:减少我们动画的移动 所有用户 在第一个渲染.

许可证

麻省理工学院