Skip to content

☄️ An extremely light-weight react transition animation hook which is simpler and easier to use than react-transition-group

License

Notifications You must be signed in to change notification settings

iamyoki/transition-hook

Repository files navigation

☄️ transition-hook

🧪 Run Tests 🚀 Release The Package transition hook

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


example
See Example | See Example in Codesandbox

example example

example example

example example example

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

License

MIT