use-start-view-transition

A set of hooks and utils to use document.startViewTransition upon state/value changes.

Demo & Playground

https://codesandbox.io/p/sandbox/hsrt6g

Installation

1npm i use-start-view-transition

Usage

startViewTransition

A simply utility function that wraps the document.startViewTransition method. It supports server-side rendering and also gracefully falls back the method is not available in your browser.

1import { startViewTransition } from 'use-start-view-transition'
2
3startViewTransition(() => {
4    // Your code here
5})

useStartViewTransitionState

Straight up replacement for useState that starts a view transition upon state changes.

1import { useStartViewTransitionState } from 'use-start-view-transition'
2
3const [state, setState] = useStartViewTransitionState(0)

useStartViewTransitionWrap

A hook that can be used to wrap any tuples with the following shape: [state, setState]. It gives support to any state management library/util that uses the same shape.

1import { useStartViewTransitionWrap } from 'use-start-view-transition'
2import { useLocalStorage } from 'react-use'
3
4const keyState = useLocalStorage('key', 0)
5const [key, setKey] = useStartViewTransitionWrap(keyState)
6
7// Or simply
8
9const [key, setKey] = useStartViewTransitionWrap(useLocalStorage('key', 0))

useStartViewTransitionValue

A hook that lets you start a view transition upon a value has been changed. It's useful when you don't have access to the underlying state setter.

1import { useStartViewTransitionValue } from 'use-start-view-transition'
2import { useQuery } from 'react-query'
3
4const { isLoading: _isLoading } = useQuery({})
5const isLoading = useStartViewTransitionValue(_isLoading)

Options

All hooks accept an optional second argument that is an object with the following shape:

1{
2    skipTransition: boolean | (value => boolean)
3}

skipTransition

A boolean or a function that returns a boolean. If true, the view transition will be skipped. If a function is provided, it will be called with the new value and should return a boolean. This is useful to handle cases where you don't want to start a view transition. For example, you only want a transition when the value is greater than 10.

1const [state, setState] = useStartViewTransitionState(0, {
2    skipTransition: value => value < 10
3})

Asynchronous State Changes

There are cases when you'd like wait for the view transition to be done before doing something else. All hooks and utils are returning a promise that resolves when the view transition is done.

1import { startViewTransition, useStarViewTransitionState } from 'use-start-view-transition'
2
3const [state, setState] = useStartViewTransitionState(0)
4
5const handleClick = async () => {
6    await startViewTransition(() => {
7        // Do something
8    })
9
10    // Do something else
11}
12
13const handleSelect = async value => {
14    await setState(value)
15
16    // Do something else
17}

Controlling transition styles

https://developer.chrome.com/docs/web-platform/view-transitions/same-document

License

MIT