daydreamer-riri / transition-hooks

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

transition-hooks

Extremely light-weight react transition hooks which is simpler and easier to use than react-transition-group.

Features

• State-driven, supports react-dom and react-native
• Hooks style, easy to use
• Tiny: ~1KB each hook and no dependencies
• Support view transition for list transition

Documentation

See Documentation.

Awesome documentation station is under construction!

Usage

This is only a brief introduction to use, more usage please visit the documentation.

useTransition

import { useState } from 'react'
import { useTransition } from 'transition-hooks'

function Demo() {
  const [show, setShow] = useState(false)
  const { status, shouldMount } = useTransition(show)

  return shouldMount
    ? (
      <div
        style={{
          transition: 'opacity 0.3s',
          opacity: (status === 'entering' || status === 'entered')
            ? 1
            : 0,
        }}
      >
        Hello Word
      </div>
      )
    : null
}

useSwitchTransition

import { useState } from 'react'
import { useSwitchTransition } from 'transition-hooks'

function Demo() {
  const [count, setCount] = useState(0)
  const { transition } = useSwitchTransition(count, { mode: 'default' })

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>add</button>
      {transition((count, { simpleStatus }) => (
        <p style={{
          transition: '.3s',
          opacity: simpleStatus === 'enter' ? 1 : 0,
          transform: {
            from: 'translateX(-100%)',
            enter: 'translateX(0%)',
            exit: 'translateX(100%)',
          }[simpleStatus]
        }}
        >{count}
        </p>
      ))}
    </div>
  )
}

useListTransition

import { useState } from 'react'
import { useListTransition } from 'transition-hooks'

function Demo() {
  const [list, setList] = useState([0, 1, 2])
  const { transitionList } = useListTransition(list)

  return (
    <div>
      <ul>
        {transitionList((item, { simpleStatus }) => {
          return (
            <li
              style={{
                opacity: simpleStatus === 'enter' ? 1 : 0,
                transform: simpleStatus === 'enter' ? 'translateX(0)' : 'translateX(20px)',
                transition: 'all 300ms',
              }}
            >
              - {item}
            </li>
          )
        })}
      </ul>
    </div>
  )
}

StatusState

interface StatusState {
  status: 'entered' | 'from' | 'entering' | 'exiting' | 'exited'
  simpleStatus: 'from' | 'enter' | 'exit'
  shouldMount: boolean
  isEnter: boolean
  notExit: boolean
  isResolved: boolean
}

See the documentation for more usage.

Credits

All credit goes to iamyoki for initiating transition-hook(the project is not currently active and does not support react18).

License

MIT License © 2023 Riri