react-transition-state 1.1.2 → 1.1.5
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 +43 -18
- package/package.json +13 -13
package/README.md
CHANGED
|
@@ -5,15 +5,15 @@
|
|
|
5
5
|
[](https://bundlephobia.com/package/react-transition-state)
|
|
6
6
|
[](https://snyk.io/test/github/szhsin/react-transition-state)
|
|
7
7
|
|
|
8
|
-
##
|
|
8
|
+
## Features
|
|
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
|
-
- 🚀 Efficient: each state transition results in at most one extract render for
|
|
16
|
-
- 🤏 Tiny: ideal for both component libraries and applications.
|
|
15
|
+
- 🚀 Efficient: each state transition results in at most one extract render for consuming component.
|
|
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'; */
|
|
@@ -70,14 +75,13 @@ export default Example;
|
|
|
70
75
|
}
|
|
71
76
|
```
|
|
72
77
|
|
|
73
|
-
**[Edit on CodeSandbox](https://codesandbox.io/s/react-transition-
|
|
78
|
+
**[Edit on CodeSandbox](https://codesandbox.io/s/react-transition-state-100io)**
|
|
74
79
|
|
|
75
80
|
<br/>
|
|
76
81
|
|
|
77
|
-
|
|
82
|
+
### styled-components example
|
|
78
83
|
|
|
79
84
|
```jsx
|
|
80
|
-
import React from 'react';
|
|
81
85
|
import styled from 'styled-components';
|
|
82
86
|
import { useTransition } from 'react-transition-state';
|
|
83
87
|
|
|
@@ -121,18 +125,39 @@ export default StyledExample;
|
|
|
121
125
|
|
|
122
126
|
<br/>
|
|
123
127
|
|
|
124
|
-
|
|
128
|
+
### tailwindcss example
|
|
129
|
+
|
|
130
|
+
**[Edit on CodeSandbox](https://codesandbox.io/s/react-transition-tailwindcss-21nys)**
|
|
131
|
+
|
|
132
|
+
<br/>
|
|
133
|
+
|
|
134
|
+
### Perform appearing transition when page loads or a component mounts
|
|
125
135
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
136
|
+
You can toggle on transition with the `useEffect` hook.
|
|
137
|
+
|
|
138
|
+
```js
|
|
139
|
+
useEffect(() => {
|
|
140
|
+
toggle(true);
|
|
141
|
+
}, [toggle]);
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
**[Edit on CodeSandbox](https://codesandbox.io/s/react-transition-appear-9kkss3)**
|
|
145
|
+
|
|
146
|
+
<br/>
|
|
147
|
+
|
|
148
|
+
## Comparisons with _React Transition Group_
|
|
134
149
|
|
|
135
|
-
|
|
150
|
+
| | React Transition Group | This library |
|
|
151
|
+
| --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
152
|
+
| Use derived state | _Yes_ – use an `in` prop to trigger changes in a derived transition state | _No_ – there is only a single state which is triggered by a toggle function |
|
|
153
|
+
| Controlled | _No_ – <br/>Transition state is managed internally.<br/>Resort to callback events to read the internal state. | _Yes_ – <br/>Transition state is _lifted_ up into the consuming component.<br/>You have direct access to the transition state. |
|
|
154
|
+
| DOM updates | _Imperative_ – [commit changes into DOM imperatively](https://github.com/reactjs/react-transition-group/blob/5aa3fd2d7e3354a7e42505d55af605ff44f74e2e/src/CSSTransition.js#L10) to update `classes` | _Declarative_ – you declare [what the `classes` look like](https://github.com/szhsin/react-transition-state/blob/2ab44c12ac5d5283ec3bb997bfc1d5ef6dffb0ce/example/src/components/BasicExample.js#L31) and DOM updates are taken care of by `ReactDOM` |
|
|
155
|
+
| Render something in response to state updates | _Resort to side effects_ – rendering based on [state update events](https://codesandbox.io/s/react-transition-state-vs-group-p45iy?file=/src/App.js:1007-1188) | _Pure_ – rendering based on [transition state](https://codesandbox.io/s/react-transition-state-vs-group-p45iy?file=/src/App.js:2140-2325) |
|
|
156
|
+
| Working with _styled-components_ | Your code looks like – <br/>`&.box-exit-active { opacity: 0; }`<br/>`&.box-enter-active { opacity: 1; }` | Your code looks like – <br/>`opacity: ${({ state }) => (state === 'exiting' ? '0' : '1')};` <br/> It's the way how you normally use the _styled-components_ |
|
|
157
|
+
| Bundle size | [](https://bundlephobia.com/package/react-transition-group) | ✅ [](https://bundlephobia.com/package/react-transition-state) |
|
|
158
|
+
| Dependency count | [](https://www.npmjs.com/package/react-transition-group?activeTab=dependencies) | ✅ [](https://www.npmjs.com/package/react-transition-state?activeTab=dependencies) |
|
|
159
|
+
|
|
160
|
+
This [CodeSandbox example](https://codesandbox.io/s/react-transition-state-vs-group-p45iy) demonstrates how the same transition can be implemented in a simpler, more declarative, and controllable manner than _React Transition Group_.
|
|
136
161
|
|
|
137
162
|
<br/>
|
|
138
163
|
|
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.5",
|
|
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",
|
|
@@ -39,24 +39,24 @@
|
|
|
39
39
|
"react-dom": ">=16.8.0"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@babel/core": "^7.
|
|
43
|
-
"@babel/preset-env": "^7.16.
|
|
42
|
+
"@babel/core": "^7.17.5",
|
|
43
|
+
"@babel/preset-env": "^7.16.11",
|
|
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.4.0",
|
|
47
47
|
"babel-plugin-pure-annotations": "^0.1.2",
|
|
48
48
|
"dtslint": "^4.1.6",
|
|
49
|
-
"eslint": "^
|
|
50
|
-
"eslint-config-prettier": "^8.
|
|
51
|
-
"eslint-plugin-jest": "^
|
|
52
|
-
"eslint-plugin-react-hooks": "^4.
|
|
53
|
-
"jest": "^27.
|
|
49
|
+
"eslint": "^8.9.0",
|
|
50
|
+
"eslint-config-prettier": "^8.4.0",
|
|
51
|
+
"eslint-plugin-jest": "^26.1.1",
|
|
52
|
+
"eslint-plugin-react-hooks": "^4.3.0",
|
|
53
|
+
"jest": "^27.5.1",
|
|
54
54
|
"npm-run-all": "^4.1.5",
|
|
55
|
-
"prettier": "^2.
|
|
55
|
+
"prettier": "^2.5.1",
|
|
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.67.3",
|
|
60
|
+
"typescript": "^4.5.5"
|
|
61
61
|
}
|
|
62
62
|
}
|