react-transition-state 1.1.1 → 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 +46 -17
- package/package.json +14 -14
package/README.md
CHANGED
|
@@ -5,20 +5,27 @@
|
|
|
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
|
|
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
|
|
|
20
20
|
<br/>
|
|
21
21
|
|
|
22
|
+
## State diagram
|
|
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/>
|
|
28
|
+
|
|
22
29
|
## Install
|
|
23
30
|
|
|
24
31
|
```bash
|
|
@@ -33,6 +40,8 @@ yarn add react-transition-state
|
|
|
33
40
|
|
|
34
41
|
## Usage
|
|
35
42
|
|
|
43
|
+
### CSS example
|
|
44
|
+
|
|
36
45
|
```jsx
|
|
37
46
|
import { useTransition } from 'react-transition-state';
|
|
38
47
|
/* or import useTransition from 'react-transition-state'; */
|
|
@@ -66,14 +75,13 @@ export default Example;
|
|
|
66
75
|
}
|
|
67
76
|
```
|
|
68
77
|
|
|
69
|
-
**[Edit on CodeSandbox](https://codesandbox.io/s/react-transition-
|
|
78
|
+
**[Edit on CodeSandbox](https://codesandbox.io/s/react-transition-state-100io)**
|
|
70
79
|
|
|
71
80
|
<br/>
|
|
72
81
|
|
|
73
|
-
|
|
82
|
+
### styled-components example
|
|
74
83
|
|
|
75
84
|
```jsx
|
|
76
|
-
import React from 'react';
|
|
77
85
|
import styled from 'styled-components';
|
|
78
86
|
import { useTransition } from 'react-transition-state';
|
|
79
87
|
|
|
@@ -117,18 +125,39 @@ export default StyledExample;
|
|
|
117
125
|
|
|
118
126
|
<br/>
|
|
119
127
|
|
|
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
|
|
135
|
+
|
|
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
|
+
|
|
120
148
|
## Comparisons with _React Transition Group_
|
|
121
149
|
|
|
122
|
-
|
|
|
123
|
-
|
|
|
124
|
-
| Use derived state
|
|
125
|
-
| Controlled
|
|
126
|
-
| DOM updates
|
|
127
|
-
|
|
|
128
|
-
|
|
|
129
|
-
|
|
|
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) |
|
|
130
159
|
|
|
131
|
-
This [CodeSandbox example](https://codesandbox.io/s/react-transition-state-vs-group-p45iy) demonstrates how the same transition can be implemented in a more
|
|
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_.
|
|
132
161
|
|
|
133
162
|
<br/>
|
|
134
163
|
|
|
@@ -148,7 +177,7 @@ function useTransition(
|
|
|
148
177
|
| ---------------- | -------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
149
178
|
| `enter` | boolean | true | Enable or disable enter phase transitions |
|
|
150
179
|
| `exit` | boolean | true | Enable or disable exit phase transitions |
|
|
151
|
-
| `preEnter` | boolean | | Add a 'preEnter' state immediately before 'entering'
|
|
180
|
+
| `preEnter` | boolean | | Add a 'preEnter' state immediately before 'entering', which is necessary to change DOM elements from unmounted or `display: none` with CSS transition (not necessary for CSS animation). |
|
|
152
181
|
| `preExit` | boolean | | Add a 'preExit' state immediately before 'exiting' |
|
|
153
182
|
| `initialEntered` | boolean | | Beginning from 'entered' state |
|
|
154
183
|
| `mountOnEnter` | boolean | | State will be 'unmounted' until hit enter phase for the first time. It allows you to create lazily mounted component. |
|
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.4",
|
|
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.
|
|
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
|
|
47
|
-
"babel-plugin-pure-annotations": "^0.1.
|
|
46
|
+
"@types/jest": "^27.4.0",
|
|
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
|
}
|