feat: add useReducedMotion hook & export useIsomorphicLayout hook

[joshuaellis]

Why

useIsomorphicLayoutEffect

There's been a version of useIsomorphicLayoutEffect in the codebase for a while that was accessible if you knew where to import it from, but now it will be a first class export from the target you install:

import { useIsomorphicLayoutEffect } from '@react-spring/web'

I personally find myself recreating this hook in most of my codebases hence the motivation.

useReducedMotion

The general consensus was to use https://github.com/infiniteluke/react-reduce-motion in conjunction with Globals.assign to handle reduced motion requirements for the user. Now, there will be a dedicated hook that can be used to automatically respond to prefer-reduced-motion media settings & return the value (so it can be used on videos / images etc.)

// web based
import { useReducedMotion } from '@react-spring/web'
// native based
import { useReducedMotion } from '@react-spring/native'

This should work in native & web based environments.

What

• export useIsomorphicLayoutEffect from @react-spring/shared
• add useReducedMotion hook
• add useReducedMotion.native hook
• add tests for useReducedMotion hook
• add documentation for new hooks

Checklist

• Documentation updated
• Ready to be merged

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
react-spring-io	✅ Ready (Inspect)	Visit Preview	Jul 13, 2022 at 7:50AM (UTC)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit a9f5862:

Sandbox	Source
spring-animating-auto	Configuration
spring-card	Configuration
spring-cards-stack	Configuration
spring-chain	Configuration
spring-draggable-list	Configuration
spring-exit-before-enter	Configuration