react-transition-state
Advanced tools
Comparing version 0.1.0 to 0.2.0
{ | ||
"name": "react-transition-state", | ||
"version": "0.1.0", | ||
"version": "0.2.0", | ||
"description": "Manage react component state transition with ease.", | ||
@@ -11,2 +11,3 @@ "author": "Zheng Song", | ||
"module": "dist/index.es.js", | ||
"types": "dist/index.d.ts", | ||
"files": [ | ||
@@ -25,3 +26,5 @@ "dist" | ||
"test": "echo \"Error: no test specified\" && exit 1", | ||
"eg": "npm start --prefix example" | ||
"eg": "npm start --prefix example", | ||
"dtslint": "dtslint --localTs node_modules/typescript/lib types", | ||
"types": "npm run dtslint && cp -f types/index.d.ts dist/" | ||
}, | ||
@@ -35,7 +38,9 @@ "peerDependencies": { | ||
"@rollup/plugin-babel": "^5.3.0", | ||
"dtslint": "^4.1.3", | ||
"react": "^17.0.2", | ||
"react-dom": "^17.0.2", | ||
"rollup": "^2.56.0", | ||
"rollup-plugin-terser": "^7.0.2" | ||
"rollup-plugin-terser": "^7.0.2", | ||
"typescript": "^4.3.5" | ||
} | ||
} | ||
} |
@@ -7,7 +7,8 @@ # React-Transition-State | ||
This tiny library was inspired by the [React Transition Group](https://github.com/reactjs/react-transition-group). It allows you to easily perform animations/transitions of your React component in a [fully controlled](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#common-bugs-when-using-derived-state) manner: | ||
- Works with both CSS animation and transition. | ||
- NO [derived state](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html). | ||
- Efficient: each state transition results in at most one extract render for your component. | ||
- Tiny in size: ideal for both component libraries and applications. | ||
This library was inspired by the [React Transition Group](https://github.com/reactjs/react-transition-group). It allows you to easily perform animations/transitions of your React component in a [fully controlled](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#common-bugs-when-using-derived-state) manner: | ||
- 🍭 Working with both CSS animation and transition. | ||
- 🔄 Moving React components in and out of DOM seamlessly. | ||
- 🚫 Using no [derived state](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html). | ||
- 🚀 Efficient: each state transition results in at most one extract render for your component. | ||
- 🤏 Tiny in size: ideal for both component libraries and applications. | ||
@@ -55,1 +56,34 @@ ## Install | ||
``` | ||
**[Edit on CodeSandbox](https://codesandbox.io/s/react-transition-basic-100io)** | ||
## API | ||
### `useTransition` Hook | ||
```typescript | ||
function useTransition(options?: TransitionOptions): [ | ||
TransitionState, | ||
(toEnter?: boolean) => void, | ||
() => void | ||
]; | ||
``` | ||
#### Options | ||
Name | Type | Default | Description | ||
------------ | ------------- | ------------- | ------------- | ||
`enter` | boolean | true | Enable or disable enter phase transitions | ||
`exit` | boolean | true | Enable or disable exit phase transitions | ||
`preEnter` | boolean | | Add a 'preEnter' state immediately before 'entering' | ||
`preExit` | boolean | | Add a 'preExit' state immediately before 'exiting' | ||
`initialEntered` | boolean | | Begining from 'entered' state | ||
`mountOnEnter` | boolean | | State will be 'unmounted' until hit enter phase for the first time. It allows you to create lazily mounted component. | ||
`unmountOnExit` | boolean | | State will become 'unmounted' after 'exiting' finishes. It allows you to transition component out of DOM. | ||
`timeout` | number \| <br />{ enter?: number; exit?: number; } | | Set timeout in **ms** for transitions; you can set a single value or different values for enter and exit transitions. | ||
#### Return value | ||
The `useTransition` Hook returns an array of values in the following order: | ||
1. state: 'preEnter' | 'entering' | 'entered' | 'preExit' | 'exiting' | 'exited' | 'unmounted' | ||
2. toggle: (toEnter?: boolean) => void | ||
- If no parameter is supplied, this function will toggle state between enter and exit phases. | ||
- You can set a boolean parameter to explicitly switch into one of the two phases. | ||
3. endTransition: () => void | ||
- Call this function to stop transition which will turn state into 'entered' or 'exited'. | ||
- You will normally call this function in the `onAnimationEnd` or `onTransitionEnd` event. | ||
- You **must** either call this function explicitly in your code or set a timeout value in Hook options. |
16695
7
267
88
8