Extremely light-weight react transition hooks which is simpler and easier to use than react-transition-group
npm install transition-hooks[![NPM version][npm-version-src]][npm-version-href]
[![bundle][bundle-src]][bundle-href]
[![JSDocs][jsdocs-src]][jsdocs-href]
[![License][license-src]][license-href]
Extremely light-weight react transition hooks which is simpler and easier to use than react-transition-group.
- 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
Awesome documentation station is under construction!
> This is only a brief introduction to use, more usage please visit the documentation.
``tsx
import { useState } from 'react'
import { useTransition } from 'transition-hooks'
function Demo() {
const [show, setShow] = useState(false)
const { status, shouldMount } = useTransition(show)
return shouldMount
? (
transition: 'opacity 0.3s',
opacity: (status === 'entering' || status === 'entered')
? 1
: 0,
}}
>
Hello Word
$3
tsx
import { useState } from 'react'
import { useSwitchTransition } from 'transition-hooks'function Demo() {
const [count, setCount] = useState(0)
const { transition } = useSwitchTransition(count, { mode: 'default' })
return (
{transition((count, { simpleStatus }) => (
transition: '.3s',
opacity: simpleStatus === 'enter' ? 1 : 0,
transform: {
from: 'translateX(-100%)',
enter: 'translateX(0%)',
exit: 'translateX(100%)',
}[simpleStatus]
}}
>
{count}
))}
)
}
`$3
tsx
import { useState } from 'react'
import { useListTransition } from 'transition-hooks'function Demo() {
const [list, setList] = useState([0, 1, 2])
const { transitionList } = useListTransition(list)
return (
{transitionList((item, { simpleStatus }) => {
return (
opacity: simpleStatus === 'enter' ? 1 : 0,
transform: simpleStatus === 'enter' ? 'translateX(0)' : 'translateX(20px)',
transition: 'all 300ms',
}}
>
- {item}
)
})}
)
}
`$3
ts
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.
All credit goes to iamyoki for initiating transition-hook(the project is not currently active and does not support react18).
[npm-version-src]: https://img.shields.io/npm/v/transition-hooks?style=flat&colorA=080f12&colorB=1fa669
[npm-version-href]: https://www.npmjs.com/package/transition-hooks
[bundle-src]: https://img.shields.io/bundlephobia/minzip/transition-hooks?style=flat&colorA=080f12&colorB=1fa669&label=minzip
[bundle-href]: https://bundlephobia.com/result?p=transition-hooks
[license-src]: https://img.shields.io/github/license/daydreamer-riri/transition-hooks.svg?style=flat&colorA=080f12&colorB=1fa669
[license-href]: https://github.com/daydreamer-riri/transition-hooks/blob/main/LICENSE
[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=080f12&colorB=1fa669
[jsdocs-href]: https://www.jsdocs.io/package/transition-hooks