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

1import { useState } from 'react'
2import { useTransition } from 'transition-hooks'
3
4function Demo() {
5  const [show, setShow] = useState(false)
6  const { status, shouldMount } = useTransition(show)
7
8  return shouldMount
9    ? (
10        <div
11          style={{
12            transition: 'opacity 0.3s',
13            opacity: (status === 'entering' || status === 'entered')
14              ? 1
15              : 0,
16          }}
17        >
18          Hello Word
19        </div>
20      )
21    : null
22}

useSwitchTransition

1import { useState } from 'react'
2import { useSwitchTransition } from 'transition-hooks'
3
4function Demo() {
5  const [count, setCount] = useState(0)
6  const { transition } = useSwitchTransition(count, { mode: 'default' })
7
8  return (
9    <div>
10      <button onClick={() => setCount(count + 1)}>add</button>
11      {transition((count, { simpleStatus }) => (
12        <p style={{
13          transition: '.3s',
14          opacity: simpleStatus === 'enter' ? 1 : 0,
15          transform: {
16            from: 'translateX(-100%)',
17            enter: 'translateX(0%)',
18            exit: 'translateX(100%)',
19          }[simpleStatus]
20        }}
21        >
22          {count}
23        </p>
24      ))}
25    </div>
26  )
27}

useListTransition

1import { useState } from 'react'
2import { useListTransition } from 'transition-hooks'
3
4function Demo() {
5  const [list, setList] = useState([0, 1, 2])
6  const { transitionList } = useListTransition(list)
7
8  return (
9    <div>
10      <ul>
11        {transitionList((item, { simpleStatus }) => {
12          return (
13            <li
14              style={{
15                opacity: simpleStatus === 'enter' ? 1 : 0,
16                transform: simpleStatus === 'enter' ? 'translateX(0)' : 'translateX(20px)',
17                transition: 'all 300ms',
18              }}
19            >
20              - {item}
21            </li>
22          )
23        })}
24      </ul>
25    </div>
26  )
27}

StatusState

1interface StatusState {
2  status: 'entered' | 'from' | 'entering' | 'exiting' | 'exited'
3  simpleStatus: 'from' | 'enter' | 'exit'
4  shouldMount: boolean
5  isEnter: boolean
6  notExit: boolean
7  isResolved: boolean
8}

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