Package Exports

transition-hook
transition-hook/dist/cjs/index.js
transition-hook/dist/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (transition-hook) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

☄️ transition-hook

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

See More Examples in Codesandbox

Installation
Usage
API Reference
Also see these amazing hooks
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>

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