iamyoki☄️ 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
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 |