transition-hook

An extreme light-weight(0.4kb) react transition animation hook which is simpler and easier to use than react-transition-group

example

View Demo View Github

Installation

Install with yarn

yarn add transition-hook

Or install with npm

npm install transition-hook --save

Usage

useTransition

This hook transform 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>

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>

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

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.

License

MIT