@vanyapr/transition-hook
v1.5.4
Published
☄️ An extremely light-weight react transition animation hook which is simpler and easier to use than react-transition-group
Downloads
17,942
Maintainers
Readme
Installation
Install with yarn
yarn add transition-hook
Or install with npm
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.
const [onOff, setOnOff] = useState(true)
const {stage, shouldMount} = useTransition(onOff, 300) // (state, timeout)
return <div>
<button onClick={()=>setOnOff(!onOff)}>toggle</button>
{shouldMount && (
<p style={{
transition: '.3s',
opacity: stage === 'enter' ? 1 : 0
}}>
Hey guys, I'm fading
</p>
)}
</div>
useSwitchTransition
This hook transforms when the state changes.
const [count, setCount] = useState(0)
const transition = useSwitchTransition(count, 300, 'default') // (state, timeout, mode)
return <div>
<button onClick={()=>setCount(count+1)}>add</button>
{transition((state, stage)=>(
<p style={{
transition: '.3s',
opacity: stage === 'enter' ? 1 : 0,
transform: {
from: 'translateX(-100%)',
enter: 'translateX(0%)',
leave: 'translateX(100%)',
}[stage]
}}>{state}</p>
))}
</div>
Transition
If you prefer FaCC pattern usage, there it is!
const [onOff, setOnOff] = useState(true)
return <div>
<button onClick={()=>setOnOff(!onOff)}>toggle</button>
<Transition state={onOff} timeout={300}>
{(stage, shouldMount)=>shouldMount &&(
<p style={{
transition: '.3s',
opacity: stage === 'enter' ? 1 : 0
}}>
Hey guys, I'm fading
</p>
)}
</Transition>
</div>
SwitchTransition
FaCC pattern version of useSwitchTransition
<SwitchTransition state={count} timeout={300} mode='default'>
{(state, stage) => (
<h1
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
</h1>
)}
</SwitchTransition>
API Reference
useTransition(state, timeout)
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)
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
<Transition state={onOff} timeout={300}>
{(stage, shouldMount) => shouldMount && <div style={{...}}>hello</div>}
</Transition>
| 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
<SwitchTransition state={count} timeout={300}>
{(state, stage) => <div style={{...}}>{state} hello</div>}
</SwitchTransition>
| 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
<ListTransition list={list} timeout={300}>
{(item, stage)=><h1 style={...}>{item}</h1>}
</ListTransition>
| Props | Type | Description |
| :--------- | :------------------------------------------- | :------------------------------------------------------------ |
| list
| Array<any>
| 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 |