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. |