โ๏ธ transition-hook
An extremely light-weight(1kb) react transition animation hook which is simpler and easier to use than react-transition-group
See Example |
See Example in Codesandbox
See More Examples in Codesandbox
- [Installation](#installation)
- [Usage](#usage)
- [useTransition](#usetransition)
- [useSwitchTransition](#useswitchtransition)
- [Transition](#transition)
- [SwitchTransition](#switchtransition)
- [API Reference](#api-reference)
- [useTransition(state, timeout)](#usetransitionstate-timeout)
- [useSwitchTransition(state, timeout, mode)](#useswitchtransitionstate-timeout-mode)
- [Transition](#transition-1)
- [SwitchTransition](#switchtransition-1)
- [ListTransition](#listtransition)
- [Also see these amazing hooks](#also-see-these-amazing-hooks)
- [License](#license)
## Installation
Install with yarn
```bash
yarn add transition-hook
```
Or install with npm
```bash
npm install transition-hook --save
```
## Usage
### useTransition
This hook transforms a boolean state into transition stage('from' | 'enter' | 'leave'), and unmount the component after timeout.
```jsx
const [onOff, setOnOff] = useState(true)
const {stage, shouldMount} = useTransition(onOff, 300) // (state, timeout)
return
{shouldMount && (
Hey guys, I'm fading
)}
```
### useSwitchTransition
This hook transforms when the state changes.
```jsx
const [count, setCount] = useState(0)
const transition = useSwitchTransition(count, 300, 'default') // (state, timeout, mode)
return
{transition((state, stage)=>(
{state}
))}
```
### Transition
If you prefer FaCC pattern usage, there it is!
```jsx
const [onOff, setOnOff] = useState(true)
return
{(stage, shouldMount)=>shouldMount &&(
Hey guys, I'm fading
)}
```
### SwitchTransition
FaCC pattern version of useSwitchTransition
```jsx
{(state, stage) => (
{state} {stage} hello
)}
```
## API Reference
### useTransition(state, timeout)
```js
const {stage, shouldMount} = useTransition(onOff, 300)
```
| Parameters | Type | Description |
| :--------- | :-------- | :-------------------------------------------------------------------- |
| `state` | `boolean` | **Required**. Your boolean state, which controls animation in and out |
| `timeout` | `number` | **Required**. How long before the animation ends and unmounts |
| Returns | Type | Description |
| :------------ | :---------------------------------- | :-------------------------------------------------- |
| `stage` | Stage: `from` \| `enter` \| `leave` | Use three different stage to perform your animation |
| `shouldMount` | `boolean` | Whether the component should be mounted |
### useSwitchTransition(state, timeout, mode)
```js
const transition = useSwitchTransition(onOff, 300, 'default')
```
| Parameters | Type | Description |
| :--------- | :-------------------------------- | :------------------------------------------------------------ |
| `state` | `any` | **Required**. Your state, which triggers animation |
| `timeout` | `number` | **Required**. How long before the animation ends and unmounts |
| `mode` | `default` \| `out-in` \| `in-out` | **Optional**. Default to `default` mode |
### Transition
```jsx
{(stage, shouldMount) => shouldMount && hello
}
```
| Props | Type | Description |
| :--------- | :------------------------------------------------------ | :-------------------------------------------------------------------- |
| `state` | `boolean` | **Required**. Your boolean state, which controls animation in and out |
| `timeout` | `number` | **Required**. How long before the animation ends and unmounts |
| `children` | `(stage: Stage, shouldMount: boolean)=>React.ReactNode` | **Required**. FaCC pattern. |
### SwitchTransition
```jsx
{(state, stage) => {state} hello
}
```
| Props | Type | Description |
| :--------- | :-------------------------------------------- | :-------------------------------------------------------------------- |
| `state` | `any` | **Required**. Your boolean state, which controls animation in and out |
| `timeout` | `number` | **Required**. How long before the animation ends and unmounts |
| `mode` | `default` \| `out-in` \| `in-out` | **Optional**. Default to `default` mode |
| `children` | `(state: any, stage: Stage)=>React.ReactNode` | **Required**. FaCC pattern. |
### ListTransition
```jsx
{(item, stage)=>{item}
}
```
| Props | Type | Description |
| :--------- | :------------------------------------------- | :------------------------------------------------------------ |
| `list` | `Array` | **Required**. Your array state |
| `timeout` | `number` | **Required**. How long before the animation ends and unmounts |
| `children` | `(item: any, stage: Stage)=>React.ReactNode` | **Required**. FaCC pattern. |
## Also see these amazing hooks
| Repo | Intro |
| :------------------------------------------------------------------------ | :-------------------------------------------------------- |
| [๐งป infinite-scroll-hook](https://github.com/iamyoki/infinite-scroll-hook) | Scroll down to load more never been so easy! |
| [โ๏ธ transition-hook](https://github.com/iamyoki/transition-hook) | An extremely light-weight react transition animation hook |
## License
[MIT](https://choosealicense.com/licenses/mit/)