Skip to content

feat: add useReducedMotion hook & export useIsomorphicLayout hook #1886

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Jul 13, 2022
Merged

feat: add useReducedMotion hook & export useIsomorphicLayout hook #1886

Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cbb142f
feat: export useIsomorphicLayoutEffect
joshuaellis May 5, 2022
b5dff98
feat: add useReducedMotion hooks
joshuaellis May 5, 2022
8b97d88
chore: update useIsomorphicLayoutEffect comment
joshuaellis May 5, 2022
729d1f5
chore: export new useReducedMotion hook
joshuaellis May 5, 2022
540dcad
feat: add test for useReducedMotion
joshuaellis May 10, 2022
a06eddb
Merge branch 'master' into feat/isomorphic-effect-and-reduce-motion
joshuaellis Jun 17, 2022
a9f5862
Merge branch 'master' into feat/isomorphic-effect-and-reduce-motion
joshuaellis Jul 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
chore: update useIsomorphicLayoutEffect comment
  • Loading branch information
@joshuaellis
joshuaellis committed May 5, 2022
commit 8b97d8855ca79299f80eb9364070f5ee58a44abc
16 changes: 9 additions & 7 deletions packages/shared/src/hooks/useIsomorphicLayoutEffect.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import { useEffect, useLayoutEffect } from 'react'

// For server-side rendering: https://github.com/react-spring/zustand/pull/34
// Deno support: https://github.com/pmndrs/zustand/issues/347
const isSSR =
typeof window === 'undefined' ||
!window.navigator ||
/ServerSideRendering|^Deno\//.test(window.navigator.userAgent)
import { isSSR } from '../helpers'

export const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect
/**
* Use this to read layout from the DOM and synchronously
* re-render if the isSSR returns true. Updates scheduled
* inside `useIsomorphicLayoutEffect` will be flushed
* synchronously in the browser, before the browser has
* a chance to paint.
*/
export const useIsomorphicLayoutEffect = isSSR() ? useEffect : useLayoutEffect