transition-hook

☄️ transition-hook

An extreme light-weight(0.4kb) 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
• Usage
  • useTransition
  • useSwitchTransition
  • Transition
• API Reference
  • useTransition(state, timeout)
  • useSwitchTransition(state, timeout, mode)
  • Transition
• License

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>

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 | int-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.

License

MIT

Changelog

1.2.1 (2021-12-22)

Docs

• update readme, add useSwitchTransition doc, add more examples (702d098)