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

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

License

MIT