Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
transition-hook
Advanced tools
☄️ An extremely light-weight react transition animation hook which is simpler and easier to use than react-transition-group
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
Install with yarn
yarn add transition-hook
Or install with npm
npm install transition-hook --save
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>
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>
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>
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>
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 |
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 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 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 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. |
Repo | Intro |
---|---|
🧻 infinite-scroll-hook | Scroll down to load more never been so easy! |
☄️ transition-hook | An extremely light-weight react transition animation hook |
FAQs
☄️ An extremely light-weight react transition animation hook which is simpler and easier to use than react-transition-group
The npm package transition-hook receives a total of 5,511 weekly downloads. As such, transition-hook popularity was classified as popular.
We found that transition-hook demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.