Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/daydreamer-riri/transition-hooks
An extremely light-weight react transition animation hook which is simpler and easier to use than react-transition-group
https://github.com/daydreamer-riri/transition-hooks
animation hooks react react-native react-transition-group transition transition-animation
Last synced: 2 months ago
JSON representation
An extremely light-weight react transition animation hook which is simpler and easier to use than react-transition-group
- Host: GitHub
- URL: https://github.com/daydreamer-riri/transition-hooks
- Owner: Daydreamer-riri
- License: mit
- Created: 2024-04-01T20:00:40.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-07-31T05:36:00.000Z (6 months ago)
- Last Synced: 2024-08-31T07:47:37.416Z (5 months ago)
- Topics: animation, hooks, react, react-native, react-transition-group, transition, transition-animation
- Language: TypeScript
- Homepage: https://transition-hooks.netlify.app/
- Size: 603 KB
- Stars: 13
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# 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.
## 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](https://transition-hooks.netlify.app/).
Awesome documentation station is under construction!
## Usage
> This is only a brief introduction to use, more usage please visit the [documentation](https://transition-hooks.netlify.app/).
### useTransition
```tsx
import { useState } from 'react'
import { useTransition } from 'transition-hooks'
function Demo() {
const [show, setShow] = useState(false)
const { status, shouldMount } = useTransition(show)
return shouldMount
? (
Hello Word
)
: null
}
```
### useSwitchTransition
```tsx
import { useState } from 'react'
import { useSwitchTransition } from 'transition-hooks'
function Demo() {
const [count, setCount] = useState(0)
const { transition } = useSwitchTransition(count, { mode: 'default' })
return (
setCount(count + 1)}>add
{transition((count, { simpleStatus }) => (
{count}
))}
)
}
```
### useListTransition
```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 (
-
- {item}
)
})}
)
}
```
### `StatusState`
```ts
interface StatusState {
status: 'entered' | 'from' | 'entering' | 'exiting' | 'exited'
simpleStatus: 'from' | 'enter' | 'exit'
shouldMount: boolean
isEnter: boolean
notExit: boolean
isResolved: boolean
}
```
See the [documentation](https://transition-hooks.netlify.app/) for more usage.
## Credits
All credit goes to [iamyoki](https://github.com/iamyoki) for initiating [transition-hook](https://github.com/iamyoki/transition-hook)(the project is not currently active and does not support react18).
## License
[MIT](./LICENSE) License © 2023 [Riri](https://github.com/Daydreamer-riri)
[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