transitions-kit - npm explorer

npm install transitions-kit

TransitionsKit

![NPM Version](https://www.npmjs.com/package/transitions-kit)
![storybook](https://denchiklut.github.io/transitions-kit)
![NPM Downloads](https://www.npmjs.com/package/transitions-kit)
![GitHub Repo stars](https://github.com/denchiklut/transitions-kit?tab=readme-ov-file)

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

![Edit transitions-kit](https://codesandbox.io/p/sandbox/transitions-kit-fr6dgx)

Installation


 npm i transitions-kit


Or via yarn


yarn add transitions-kit


Usage example
$3

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

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

)
}


To animate a component when it is mounted or unmounted, you can use the

component from react-transition-group. As components are added or removed, the in prop is toggled automatically by TransitionGroup.

`tsx 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 (


              disabled={fruitsInBasket.length >= FRUITS.length}
        onClick={handleAddFruit}
      >
        Add fruit to basket
      
    
      
        
          {fruitsInBasket.map((item) => (
            
              
                {item}
                
              

            
          ))}

)
}


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

tsx
import { Collapse } from 'transitions-kit';
import { useState } from 'react'
export default function() {
  const [open, setOpen] = useState(false)
  return (
    

      
      
        
      
    

  )
}


$3

| Property      | Type                     | Description                                                                  |
|---------------|--------------------------|------------------------------------------------------------------------------|
| orientation   |

horizontal \| vertical

 | The transition orientation.                                                  |
| collapsedSize |

number \| string

       | The width (horizontal) or height (vertical) of the container when collapsed. |
---

$3

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.

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

export default function() { const [open, setOpen] = useState(false) const ref = useRef(null) return (


      
    
      
        Show from target

                  ref={ref}
          style={{
            border: '1px solid', overflow: 'hidden',
            height: 200, width: 200, padding: 10,
          }}
        >