React hooks for the document transition API

Overview

React Document Transitions

This package enables creating complex state transitions by using simple hooks. It uses document.createDocumentTransition from the page transition API. This API is currently only available in Chrome Canary and requires the chrome://flags/#document-transition flag to be enabled.

Basic Usage

The useTransitionState hook is a thin wrapper around the useState hook and exposes a nearly identical API.

import React, { useState } from 'react';
import { useTransitionState } from 'react-document-transition';

function Example() {
  const [count, setCount] = useTransitionState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

However, in browsers which support the document.createDocumentTransition API, any state changes will be animated.

Advanced Usage

ToDo List Example

import { useTransitionState } from 'react-document-transition';

type TodoItem = {
  name: string;
  done: boolean;
}

type TodoListState = {
  items: TodoItem[],
}

function Item(item: TodoItem & { toggle: (item: TodoItem) => void}) {
  const slug = item.name.replaceAll(" ", "-").toLowerCase();
  const toggle = () => {
    item.toggle(item);
  };

  return (
    <div
      onClick={toggle}
      className={`item ${item.done ? 'done' : ''}`}
      style={{
        pageTransitionTag: slug,
      } as React.CSSProperties}
    >
      <h1>{item.name}</h1>
    </div>
  );
}

function App() {
  const [state, setState] = useTransitionState<TodoListState>({
    items: [
      { done: false, name: "Buy Milk" },
      { done: false, name: "Publish NPM Package" },
      { done: false, name: "Become Rich and Famous" },
      { done: true, name: "Pay Rent" },
      { done: true, name: "Create React Document Transition Hook" },
    ],
  });

  function toggle(item: TodoItem) {
    let items: TodoItem[] = Array.from(state.items);

    const foundItem = items.find(maybeItem => maybeItem.name === item.name);
    if (foundItem) {
      foundItem.done = !foundItem.done;
    }
    
    setState({
      items,
    });
  }

  return (
    <div className="App">
      <div className="todo-col">
        {state.items.filter(item => !item.done).map((item) => (
          <Item {...item} toggle={toggle} key={item.name} />
        ))}
      </div>
      <div className="done-col">
        {state.items.filter(item => item.done).map((item) => (
          <Item {...item} toggle={toggle} key={item.name} />
        ))}
      </div>
    </div>
  );
}

export default App;
.App {
  text-align: center;
  display: flex;
  min-height: 100vh;
}

.todo-col {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  padding: 12px;
  flex: 1;
  background: red;
}

.done-col {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  padding: 12px;
  flex: 1;
  background: green;
}

.item {
  contain: paint;
  background: lightpink;
  border-radius: 12px;
  cursor: pointer;
}

.item.done {
  background: lightblue;
}

.item.done h1 {
  font-size: 16px;
}
You might also like...
A small but powerful animation library for React, built on Web Animations API
A small but powerful animation library for React, built on Web Animations API

A small but powerful animation library for React, built on Web Animations API

JavaScript implementation of the Web Animations API

What is Web Animations? A new JavaScript API for driving animated content on the web. By unifying the animation features of SVG and CSS, Web Animation

A wrapper over Motion One, An animation library, built on the Web Animations API for the smallest filesize and the fastest performance

A wrapper over Motion One, An animation library, built on the Web Animations API for the smallest filesize and the fastest performance. Works with solid-js

Implementing Seqwa's Autocomplete REST API with ReactJS, TailwindCSS, HeadlessUI, Java and SpringBoot

Seqwa Autocomplete API Implementation About Seqwa Seqwa is a low-cost, easy-to-use, hosted search platform for solving your critical search requiremen

painless transitions built for react-router, powered by react-motion

React Router Transition Painless transitions for React Router, powered by React Motion. Example site. Requirements To use the latest version of this p

A React library to work with lottie animations inside React.js

React Lottie Tools This React library helps to work with lottie animations inside React.js Info This library is an abstraction of the official lottie

react-animated-numbers - 👾 Library showing animation of number changes in react.js

react-animated-numbers - 👾 Library showing animation of number changes in react.js

React App with games using animations (react-spring)
React App with games using animations (react-spring)

Teddy games https://pylnata.github.io/teddy/ React App with cartoon animations and games for kids. Developed just for fun and to learn React-spring li

Animated sidebar using react , react icon

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Owner
Ben Heidemann
Developer at Eliga Services
Ben Heidemann
⚛️ Perform animation and transition of React component with ease.

⚛️ Perform animation and transition of React component with ease.

Zheng Song 232 Dec 28, 2022
A more full-featured transition group for React

React TransitionGroupPlus A drop-in replacement for the original react-addons-transition-group that allows interruptible transitions and specifying tr

Chang Wang 267 Nov 26, 2022
🚀 Smooth Liquid Swipe Animation to transition between different components.

?? React LiquidSwipe Very smooth component transition animation with liquid swipe effect. Loved the project? Please consider donating to help it impro

Ashutosh Hathidara 362 Dec 16, 2022
🚀 Transition number values using easing functions

react-transition-value Transition / Animate number values using easing functions Try Demos → ⚡️ Getting started npm i react-transition-value import

Björn 46 Dec 15, 2022
A React hook that animates the document title and/or favicon when focus from the page is lost.

react-use-please-stay ?? ?? A React hook that animates the document title and/or favicon when focus from the page is lost. (Or jump down to the option

Chris Frewin 146 Dec 23, 2022
React and Javascript playground to run and document code without any of setup

React Play React and Javascript playground to run and document code without any of setup. ⚡ Features ?? fast and easy to use ?? no setup required ✨ di

Naman Shankhydhar 11 Oct 2, 2022
React-todo-app-with-framer-motion - TodoMVC App with React hooks and Framer Motion

TodoMVC App with React hooks and Framer Motion CleanShot.2022-01-29.at.18.27.06.

Miguel Ángel Durán 30 Dec 23, 2022
React components for the Web Animations API - http://react-web-animation.surge.sh

react-web-animation react-web-animation is a set of React components that expose the Web Animations API in a declarative way. Demos Check out how you

Charles King 294 Dec 2, 2022
Sine wave animation using React & Typescript with Canvas API :heart_eyes:

Sine wave animation using React & Typescript with Canvas API :heart_eyes:

Ashish Yadav 70 Nov 10, 2022
React hook for easy and performant access to requestAnimationFrame browser API

React hook for easy access requestAnimationFrame browser API. Written with Typescript and provides you with handy animation duration control.

Artiom 2 Aug 7, 2022