https://github.com/denchiklut/transitions-kit
A set of predefined transition components build on top of react-transition-gorup
https://github.com/denchiklut/transitions-kit
accordion collapse react slide transition zoom
Last synced: about 1 year ago
JSON representation
A set of predefined transition components build on top of react-transition-gorup
- Host: GitHub
- URL: https://github.com/denchiklut/transitions-kit
- Owner: denchiklut
- Created: 2022-07-27T19:04:57.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2025-03-02T17:48:39.000Z (over 1 year ago)
- Last Synced: 2025-03-28T02:44:21.447Z (over 1 year ago)
- Topics: accordion, collapse, react, slide, transition, zoom
- Language: TypeScript
- Homepage: https://denchiklut.github.io/transitions-kit
- Size: 29.1 MB
- Stars: 10
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## TransitionsKit
[](https://www.npmjs.com/package/transitions-kit)
[](https://denchiklut.github.io/transitions-kit)
[](https://www.npmjs.com/package/transitions-kit)
[](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.
[](https://codesandbox.io/p/sandbox/transitions-kit-fr6dgx)
## Installation
```
npm i transitions-kit
```
Or via yarn
```
yarn add transitions-kit
```
## Usage example
### Fade, Slide, Collapse, Grow, Blur:
```tsx
import { Fade, Slide, Collapse, Grow, Blur } from 'transitions-kit';
import { useState } from 'react'
export default function() {
const [open, setOpen] = useState(false)
return (
setOpen(!open)}>toggle
)
}
```
## ``
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 (
= FRUITS.length}
onClick={handleAddFruit}
>
Add fruit to basket
{fruitsInBasket.map((item) => (
-
{item}
handleRemoveFruit(item)}>x
))}
)
}
```
## Props
To get more information visit the `react-transition-group` Transition [documentation](https://reactcommunity.org/react-transition-group/transition).
| 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).
---
## ``
```tsx
import { Collapse } from 'transitions-kit';
import { useState } from 'react'
export default function() {
const [open, setOpen] = useState(false)
return (
setOpen(!open)}>toggle
)
}
```
### 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 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.
```tsx
import { Slide } from 'transitions-kit';
import { useState } from 'react'
export default function() {
const [open, setOpen] = useState(false)
const ref = useRef(null)
return (
setOpen(!open)}>toggle
Show from target
)
}
```
### 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. |