☄️ 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
- Usage
- useTransition
- useSwitchTransition
- Transition
- SwitchTransition
- API Reference
- useTransition(state, timeout)
- useSwitchTransition(state, timeout, mode)
- Transition
- SwitchTransition
- ListTransition
- Also see these amazing hooks
- License

Installation

Install with yarn

``bash
yarn add transition-hook
`

Or install with npm

`bash
npm install transition-hook --save
`

Usage

$3

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


`

$3

This hook transforms when the state changes.

`jsx
const [count, setCount] = useState(0)
const transition = useSwitchTransition(count, 300, 'default') // (state, timeout, mode)

return


`

$3

If you prefer FaCC pattern usage, there it is!

`jsx
const [onOff, setOnOff] = useState(true)

return


`

$3

FaCC pattern version of useSwitchTransition

`jsx

{(state, stage) => (
style={{
transition: '.3s',
opacity: stage === 'enter' ? 1 : 0,
transform: {
from: 'translateX(-100%) scale(1.2)',
enter: 'translateX(0)',
leave: 'translateX(100%) scale(0)'
}[stage]
}}>
{state} {stage} hello

)}

`

API Reference

$3

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

$3

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

$3

`jsx

{(stage, shouldMount) => shouldMount &&

}

`

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

$3

`jsx

{(state, stage) =>

}

`

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

$3

`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 | Scroll down to load more never been so easy! |
| ☄️ transition-hook | An extremely light-weight react transition animation hook |

License

MIT