react-transition-state 1.1.3 → 1.1.4
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 +28 -14
- package/package.json +11 -11
package/README.md
CHANGED
|
@@ -5,14 +5,14 @@
|
|
|
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
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
|
|
15
|
+
- 🚀 Efficient: each state transition results in at most one extract render for consuming component.
|
|
16
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)
|
|
@@ -75,14 +75,13 @@ export default Example;
|
|
|
75
75
|
}
|
|
76
76
|
```
|
|
77
77
|
|
|
78
|
-
**[Edit on CodeSandbox](https://codesandbox.io/s/react-transition-
|
|
78
|
+
**[Edit on CodeSandbox](https://codesandbox.io/s/react-transition-state-100io)**
|
|
79
79
|
|
|
80
80
|
<br/>
|
|
81
81
|
|
|
82
82
|
### styled-components example
|
|
83
83
|
|
|
84
84
|
```jsx
|
|
85
|
-
import React from 'react';
|
|
86
85
|
import styled from 'styled-components';
|
|
87
86
|
import { useTransition } from 'react-transition-state';
|
|
88
87
|
|
|
@@ -132,18 +131,33 @@ export default StyledExample;
|
|
|
132
131
|
|
|
133
132
|
<br/>
|
|
134
133
|
|
|
135
|
-
|
|
134
|
+
### Perform appearing transition when page loads or a component mounts
|
|
135
|
+
|
|
136
|
+
You can toggle on transition with the `useEffect` hook.
|
|
137
|
+
|
|
138
|
+
```js
|
|
139
|
+
useEffect(() => {
|
|
140
|
+
toggle(true);
|
|
141
|
+
}, [toggle]);
|
|
142
|
+
```
|
|
136
143
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
| 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_ |
|
|
143
|
-
| Bundle size | [](https://bundlephobia.com/package/react-transition-group) | ✅ [](https://bundlephobia.com/package/react-transition-state) |
|
|
144
|
-
| Dependency count | [](https://www.npmjs.com/package/react-transition-group?activeTab=dependencies) | ✅ [](https://www.npmjs.com/package/react-transition-state?activeTab=dependencies) |
|
|
144
|
+
**[Edit on CodeSandbox](https://codesandbox.io/s/react-transition-appear-9kkss3)**
|
|
145
|
+
|
|
146
|
+
<br/>
|
|
147
|
+
|
|
148
|
+
## Comparisons with _React Transition Group_
|
|
145
149
|
|
|
146
|
-
|
|
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_.
|
|
147
161
|
|
|
148
162
|
<br/>
|
|
149
163
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-transition-state",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.4",
|
|
4
4
|
"description": "Zero dependency, 0.7KB react-transition-group alternative.",
|
|
5
5
|
"author": "Zheng Song",
|
|
6
6
|
"license": "MIT",
|
|
@@ -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": "^
|
|
49
|
+
"eslint": "^8.9.0",
|
|
50
|
+
"eslint-config-prettier": "^8.4.0",
|
|
51
|
+
"eslint-plugin-jest": "^26.1.1",
|
|
52
52
|
"eslint-plugin-react-hooks": "^4.3.0",
|
|
53
|
-
"jest": "^27.
|
|
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.5.
|
|
59
|
+
"rollup": "^2.67.3",
|
|
60
|
+
"typescript": "^4.5.5"
|
|
61
61
|
}
|
|
62
62
|
}
|