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.

パッケージの詳細

transitions-kit

readme