• Installation
• Usage
  • useTransition
  • useSwitchTransition
  • Transition
  • SwitchTransition
• API Reference
  • useTransition(state, timeout)
  • useSwitchTransition(state, timeout, mode)
  • Transition
  • SwitchTransition
  • ListTransition
• Also see these amazing hooks
• License

Installation

Install with yarn

yarn add react-transition-hook

Or install with npm

npm install react-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