@cher-ami/react-transition

react-transition

A zero dependency React transition component who allows to manage play-in & play-out transitions of any DOM element.

About

React-transition responds to the simple request to have control over the play-in and play-out transition of any component or DOM element.

React does not by default provide the ability to execute an exit transition function before a DOM element is destroyed. Alexey Taktarov explains this "limitation" with example in this publication.

React-transition a "Vuejs like" transition API. It's intended to partially meet the same needs of Vue transition component.

Install

$ npm i @cher-ami/react-transition

Usage

import React, {useState} from "react"
import {Transition} from "@cher-ami/react-transition"
import {gsap} from "gsap/all"

const App = () => {
  const [isToggle, setIsToggle] = useState(true)

  // Example with GSAP
  const playInTransition = (el, done) => {
    gsap.fromTo(el, {autoAlpha: 0}, {autoAlpha: 1, onComplete: done})
  }

  const playOutTransition = (el, done) => {
    gsap.fromTo(el, {autoAlpha: 1}, {autoAlpha: 0, onComplete: done})
  }

  return (
    <div className={"app"}>
      <button onClick={() => setIsToggle(!isToggle)}>Toggle</button>
      <Transition
        if={isToggle}
        playIn={playInTransition}
        playOut={playOutTransition}
      >
        <div className={"element"} />
      </Transition>
    </div>
  )
}

Props

if

boolean optional - default: true
Toggle start play-in / play-out children with transition

children

ReactElement
React children element to transit

playIn

(el: HTMLElement, done: () => any) => void optional
Play-in transition function

onPlayInComplete

() => void optional
Function calls when play-in transition function is completed

playOut

(el: HTMLElement, done: () => any) => void optional
Play-out transition function

onPlayOutComplete

() => void optional
Function calls when play-out transition function is completed

appear

boolean optional - default: false
Start transition on first mount. If false, children is visible but transition start only when "if" props change

unmountAfterPlayOut

boolean optional - default: true
Unmount children React element after playOut transition

dispatchPlayState

(play: TPlay) => void optional
Dispatch current TPlay string type

Type TPlay

type TPlay = "hidden" | "play-out" | "play-in" | "visible";

import React, {useEffect, useState} from "react"
import {Transition} from "@cher-ami/react-transition"

const App = () => {
  // ...
  const [elementPlayState, setElementPlayState] = useState(null);
  useEffect(()=> {
    if (elementPlayState === "play-in") {
      // ...  
    }
  }, [elementPlayState])

  return (
    <>
      <Transition
        // ...
        // Everytime transition playState change, elementPlayState will be updated
        dispatchPlayState={(playState) => setElementPlayState(playState)}
      >
        <div className={"element"} />
      </Transition>
    </>
  )
}

Example

A use case example is available on this repos.

Install dependencies

$ npm i

Start dev server

$ npm run dev

License

MIT

Credits

Willy Brauner