TransitionsKit

A set of predefined transition components build on top of react-transition-gorup Implementation is based on Mui source code.

Installation

npm i transitions-kit

Or via yarn

yarn add transitions-kit

Usage example

Fade, Slide, Collapse, Grow, Blur:

import { Fade, Slide, Collapse, Grow, Blur } from 'transitions-kit';
import { useState } from 'react'

export default function() {
  const [open, setOpen] = useState(false)
    
  return (
    <div>
      <button onClick={() => setOpen(!open)}>toggle</button>
      
      <Fade in={open} mountOnEnter unmountOnExit>
        <img src='https://picsum.photos/400' />
      </Fade>
    </div>
    )
}

<TransitionGroup />

To animate a component when it is mounted or unmounted, you can use the <TransitionGroup /> component from react-transition-group. As components are added or removed, the in prop is toggled automatically by TransitionGroup.

import { Collapse } from 'transitions-kit'
import { TransitionGroup } from 'react-transition-group'
import { useState } from 'react'


const FRUITS = [
  '🍏 Apple',
  '🍌 Banana',
  '🍍 Pineapple',
  '🥥 Coconut',
  '🍉 Watermelon'
];

export default function() {
  const [fruitsInBasket, setFruitsInBasket] = useState(FRUITS.slice(0, 3))

  const handleAddFruit = () => {
    const nextHiddenItem = FRUITS.find((i) => !fruitsInBasket.includes(i))
    
    if (nextHiddenItem) {
      setFruitsInBasket((prev) => [nextHiddenItem, ...prev])
    }
  }

  const handleRemoveFruit = (item: string) => {
    setFruitsInBasket((prev) => [...prev.filter((i) => i !== item)])
  }
  
  return (
    <div>
      <button
        disabled={fruitsInBasket.length >= FRUITS.length}
        onClick={handleAddFruit}
      >
        Add fruit to basket
      </button>
    
      <ul>
        <TransitionGroup>
          {fruitsInBasket.map((item) => (
            <Collapse key={item}>
              <li>
                {item}
                <button onClick={() => handleRemoveFruit(item)}>x</button>
              </li>
            </Collapse>
          ))}
        </TransitionGroup>
      </ul>
    </div>
  )
}

Props

To get more information visit the react-transition-group Transition documentation.

Property	Type	Description
children	ReactElement	A single child content element.
in	Boolean	If true, the component will transition in.
mountOnEnter	Boolean	Set to true If you want to "lazy mount" the component on the first in={true}
unmountOnExit	Boolean	Set to true if you'd prefer to unmount the component after it finishes exiting.
easing	{ enter?: string, exit?: string } | string	The transition timing function. You may specify a single easing or a object containing enter and exit values
timeout	number | { appear?: number, enter?: number, exit?: number }	The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
appear	Boolean	Perform the enter transition when it first mounts if in is also true. Set this to false to disable this behavior.
addEndListener	Function	Add a custom transition end trigger. Called with the transitioning DOM node and a done callback. Allows for more fine grained transition end logic. Note: Timeouts are still used as a fallback if provided.

Child requirements

• Forward the ref: The transition components require the first child element to forward its ref to the DOM node.
• Single element: The transition components require only one child element (React.Fragment is not allowed).

---

<Collapse />

import { Collapse } from 'transitions-kit';
import { useState } from 'react'

export default function() {
  const [open, setOpen] = useState(false)

  return (
    <div>
      <button onClick={() => setOpen(!open)}>toggle</button>

      <Collapse in={open} orientation='vertical' collapsedSize='0px'>
        <img src='https://picsum.photos/400' />
      </Collapse>
    </div>
  )
}

Collapse's specific props:

Property	Type	Description
orientation	horizontal | vertical	The transition orientation.
collapsedSize	number | string	The width (horizontal) or height (vertical) of the container when collapsed.

---

<Slide />

Slide relative to a container

The Slide component also accepts container prop, which is a reference to a DOM node. If this prop is set, the Slide component will slide from the edge of that DOM node.

import { Slide } from 'transitions-kit';
import { useState } from 'react'

export default function() {
  const [open, setOpen] = useState(false)
  const ref = useRef<HTMLDivElement>(null)
  
  return (
    <div>
      <button onClick={() => setOpen(!open)}>toggle</button>
    
      <div>
        <p>Show from target</p>
        <div
          ref={ref}
          style={{
            border: '1px solid', overflow: 'hidden',
            height: 200, width: 200, padding: 10,
          }}
        >
          <Slide in={open} direction='right' container={ref.current}>
            <img src='https://picsum.photos/180' />
          </Slide>
        </div>
      </div>
    </div>
  )
}

Slide's specific props:

Property	Type	Description
container	HTML element | func	An HTML element, or a function that returns one. It's used to set the container the Slide is transitioning from.
direction	'down' | 'left' | 'right' | 'up'	Direction the child node will enter from.