Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iamyoki/transition-hook
☄️ An extremely light-weight react transition animation hook which is simpler and easier to use than react-transition-group
https://github.com/iamyoki/transition-hook
animation animation-library css hook hooks react react-spring react-transition-group transition-hook
Last synced: 11 days 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/iamyoki/transition-hook
- Owner: iamyoki
- License: mit
- Created: 2021-12-16T02:57:20.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-19T11:24:07.000Z (over 1 year ago)
- Last Synced: 2024-10-20T20:09:13.287Z (21 days ago)
- Topics: animation, animation-library, css, hook, hooks, react, react-spring, react-transition-group, transition-hook
- Language: TypeScript
- Homepage: https://github.com/iamyoki/transition-hook#%EF%B8%8F-transition-hook
- Size: 6.19 MB
- Stars: 375
- Watchers: 3
- Forks: 17
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: License.md
Awesome Lists containing this project
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](#installation)
- [Usage](#usage)
- [useTransition](#usetransition)
- [useSwitchTransition](#useswitchtransition)
- [Transition](#transition)
- [SwitchTransition](#switchtransition)
- [API Reference](#api-reference)
- [useTransition(state, timeout)](#usetransitionstate-timeout)
- [useSwitchTransition(state, timeout, mode)](#useswitchtransitionstate-timeout-mode)
- [Transition](#transition-1)
- [SwitchTransition](#switchtransition-1)
- [ListTransition](#listtransition)
- [Also see these amazing hooks](#also-see-these-amazing-hooks)
- [License](#license)
## Installation
Install with yarn
```bash
yarn add transition-hook
```
Or install with npm
```bash
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.
```jsx
const [onOff, setOnOff] = useState(true)
const {stage, shouldMount} = useTransition(onOff, 300) // (state, timeout)
return
setOnOff(!onOff)}>toggle
{shouldMount && (
Hey guys, I'm fading
)}
```
### useSwitchTransition
This hook transforms when the state changes.
```jsx
const [count, setCount] = useState(0)
const transition = useSwitchTransition(count, 300, 'default') // (state, timeout, mode)
return
setCount(count+1)}>add
{transition((state, stage)=>(
{state}
))}
```
### Transition
If you prefer FaCC pattern usage, there it is!
```jsx
const [onOff, setOnOff] = useState(true)
return
setOnOff(!onOff)}>toggle
{(stage, shouldMount)=>shouldMount &&(
Hey guys, I'm fading
)}
```
### SwitchTransition
FaCC pattern version of useSwitchTransition
```jsx
{(state, stage) => (
{state} {stage} hello
)}
```
## API Reference
### useTransition(state, timeout)
```js
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)
```js
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
```jsx
{(stage, shouldMount) => shouldMount &&
hello}
```
| 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
```jsx
{(state, stage) =>
{state} hello}
```
| 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
```jsx
{(item, stage)=>
{item}
}
```
| Props | Type | Description |
| :--------- | :------------------------------------------- | :------------------------------------------------------------ |
| `list` | `Array` | **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](https://github.com/iamyoki/infinite-scroll-hook) | Scroll down to load more never been so easy! |
| [☄️ transition-hook](https://github.com/iamyoki/transition-hook) | An extremely light-weight react transition animation hook |
## License
[MIT](https://choosealicense.com/licenses/mit/)