react-transition-state 1.1.2 → 1.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -4
- package/package.json +8 -8
package/README.md
CHANGED
|
@@ -7,13 +7,13 @@
|
|
|
7
7
|
|
|
8
8
|
## Why?
|
|
9
9
|
|
|
10
|
-
Inspired by the [React Transition Group](https://github.com/reactjs/react-transition-group), this tiny library
|
|
10
|
+
Inspired by the [React Transition Group](https://github.com/reactjs/react-transition-group), this tiny library helps you 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, using a Hook API.
|
|
11
11
|
|
|
12
12
|
- 🍭 Working with both CSS animation and transition.
|
|
13
13
|
- 🔄 Moving React components in and out of DOM seamlessly.
|
|
14
14
|
- 🚫 Using no [derived state](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html).
|
|
15
15
|
- 🚀 Efficient: each state transition results in at most one extract render for your component.
|
|
16
|
-
- 🤏 Tiny: ideal for both component libraries and applications.
|
|
16
|
+
- 🤏 Tiny: [~0.7KB](https://bundlephobia.com/package/react-transition-state) and no dependencies, ideal for both component libraries and applications.
|
|
17
17
|
|
|
18
18
|
🤔 Not convinced? [See a comparison with _React Transition Group_](#comparisons-with-react-transition-group)
|
|
19
19
|
|
|
@@ -21,7 +21,10 @@ Inspired by the [React Transition Group](https://github.com/reactjs/react-transi
|
|
|
21
21
|
|
|
22
22
|
## State diagram
|
|
23
23
|
|
|
24
|
-
|
|
25
|
+
The `initialEntered` and `mountOnEnter` props are omitted from the diagram to keep it less convoluted. [Please read more details at the API section](#usetransition-hook).
|
|
26
|
+
|
|
27
|
+
<br/>
|
|
25
28
|
|
|
26
29
|
## Install
|
|
27
30
|
|
|
@@ -37,6 +40,8 @@ yarn add react-transition-state
|
|
|
37
40
|
|
|
38
41
|
## Usage
|
|
39
42
|
|
|
43
|
+
### CSS example
|
|
44
|
+
|
|
40
45
|
```jsx
|
|
41
46
|
import { useTransition } from 'react-transition-state';
|
|
42
47
|
/* or import useTransition from 'react-transition-state'; */
|
|
@@ -74,7 +79,7 @@ export default Example;
|
|
|
74
79
|
|
|
75
80
|
<br/>
|
|
76
81
|
|
|
77
|
-
|
|
82
|
+
### styled-components example
|
|
78
83
|
|
|
79
84
|
```jsx
|
|
80
85
|
import React from 'react';
|
|
@@ -121,6 +126,12 @@ export default StyledExample;
|
|
|
121
126
|
|
|
122
127
|
<br/>
|
|
123
128
|
|
|
129
|
+
### tailwindcss example
|
|
130
|
+
|
|
131
|
+
**[Edit on CodeSandbox](https://codesandbox.io/s/react-transition-tailwindcss-21nys)**
|
|
132
|
+
|
|
133
|
+
<br/>
|
|
134
|
+
|
|
124
135
|
## Comparisons with _React Transition Group_
|
|
125
136
|
|
|
126
137
|
| | React Transition Group | This library |
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-transition-state",
|
|
3
|
-
"version": "1.1.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "1.1.3",
|
|
4
|
+
"description": "Zero dependency, 0.7KB react-transition-group alternative.",
|
|
5
5
|
"author": "Zheng Song",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"repository": "szhsin/react-transition-state",
|
|
@@ -40,23 +40,23 @@
|
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@babel/core": "^7.16.0",
|
|
43
|
-
"@babel/preset-env": "^7.16.
|
|
43
|
+
"@babel/preset-env": "^7.16.4",
|
|
44
44
|
"@rollup/plugin-babel": "^5.3.0",
|
|
45
45
|
"@testing-library/react-hooks": "^7.0.2",
|
|
46
|
-
"@types/jest": "^27.0.
|
|
46
|
+
"@types/jest": "^27.0.3",
|
|
47
47
|
"babel-plugin-pure-annotations": "^0.1.2",
|
|
48
48
|
"dtslint": "^4.1.6",
|
|
49
49
|
"eslint": "^7.32.0",
|
|
50
50
|
"eslint-config-prettier": "^8.3.0",
|
|
51
|
-
"eslint-plugin-jest": "^25.2.
|
|
52
|
-
"eslint-plugin-react-hooks": "^4.
|
|
51
|
+
"eslint-plugin-jest": "^25.2.4",
|
|
52
|
+
"eslint-plugin-react-hooks": "^4.3.0",
|
|
53
53
|
"jest": "^27.3.1",
|
|
54
54
|
"npm-run-all": "^4.1.5",
|
|
55
55
|
"prettier": "^2.4.0",
|
|
56
56
|
"react": "^17.0.2",
|
|
57
57
|
"react-dom": "^17.0.2",
|
|
58
58
|
"regenerator-runtime": "^0.13.9",
|
|
59
|
-
"rollup": "^2.
|
|
60
|
-
"typescript": "^4.
|
|
59
|
+
"rollup": "^2.60.0",
|
|
60
|
+
"typescript": "^4.5.2"
|
|
61
61
|
}
|
|
62
62
|
}
|