@hulkhooks/use-prefers-reduced-motion
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

Introduction

You can trigger animations in your React App based on user preferences using this hooks.

The source code for this hook is taken from https://www.joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion/

Installation

# Npm
npm install @hulkhooks/use-prefers-reduced-motion --save
# yarn
yarn add @hulkhooks/use-prefers-reduced-motion
# pnpm
pnpm add @hulkhooks/use-prefers-reduced-motion

Usage with React Spring

import { useSpring, animated } from "react-spring";
import { usePrefersReducedMotion } from "@hulkhooks/use-prefers-reduced-motion";
const Box = ({ isBig }) => {
  const prefersReducedMotion = usePrefersReducedMotion();
  const styles = useSpring({
    width: 100,
    height: 100,
    background: "rebeccapurple",
    transform: isBig ? "scale(2)" : "scale(1)",
    immediate: prefersReducedMotion,
  });
  return <animated.div style={styles}>Box!</animated.div>;
};

Try It

Edit hulkhooks-use-prefers-reduced-motion-712py8

Package Sidebar

Install

npm i @hulkhooks/use-prefers-reduced-motion

Weekly Downloads

2

Version

1.0.1

License

MIT

Unpacked Size

14.9 kB

Total Files

13

Last publish

Collaborators

  • projectashik