react-transition-state 2.1.1 → 2.1.2
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 +21 -6
- package/package.json +28 -22
package/README.md
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
# React-Transition-State
|
|
2
2
|
|
|
3
|
+
> Zero dependency React transition state machine
|
|
4
|
+
|
|
5
|
+
**[Live Demo](https://szhsin.github.io/react-transition-state/)**
|
|
6
|
+
|
|
3
7
|
[](https://www.npmjs.com/package/react-transition-state) [](https://www.npmjs.com/package/react-transition-state) [](https://bundlephobia.com/package/react-transition-state) [](https://snyk.io/test/github/szhsin/react-transition-state)
|
|
4
8
|
|
|
5
9
|
## Features
|
|
@@ -84,8 +88,8 @@ import { useTransition } from 'react-transition-state';
|
|
|
84
88
|
const Box = styled.div`
|
|
85
89
|
transition: all 500ms;
|
|
86
90
|
|
|
87
|
-
${({ status }) =>
|
|
88
|
-
(status === 'preEnter' || status === 'exiting') &&
|
|
91
|
+
${({ $status }) =>
|
|
92
|
+
($status === 'preEnter' || $status === 'exiting') &&
|
|
89
93
|
`
|
|
90
94
|
opacity: 0;
|
|
91
95
|
transform: scale(0.9);
|
|
@@ -104,7 +108,7 @@ function StyledExample() {
|
|
|
104
108
|
<div>
|
|
105
109
|
{!isMounted && <button onClick={() => toggle(true)}>Show Message</button>}
|
|
106
110
|
{isMounted && (
|
|
107
|
-
<Box status={status}>
|
|
111
|
+
<Box $status={status}>
|
|
108
112
|
<p>This message is being transitioned in and out of the DOM.</p>
|
|
109
113
|
<button onClick={() => toggle(false)}>Close</button>
|
|
110
114
|
</Box>
|
|
@@ -126,6 +130,17 @@ export default StyledExample;
|
|
|
126
130
|
|
|
127
131
|
<br/>
|
|
128
132
|
|
|
133
|
+
### Switch transition
|
|
134
|
+
|
|
135
|
+
You can create switch transition effects using one of the provided hooks,
|
|
136
|
+
|
|
137
|
+
- `useTransition` if the number of elements participating in the switch transition is static.
|
|
138
|
+
- `useTransitionMap` if the number of elements participating in the switch transition is dynamic and only known at runtime.
|
|
139
|
+
|
|
140
|
+
**[Edit on CodeSandbox](https://codesandbox.io/p/sandbox/react-switch-transition-x87jt8)**
|
|
141
|
+
|
|
142
|
+
<br/>
|
|
143
|
+
|
|
129
144
|
### Perform appearing transition when page loads or a component mounts
|
|
130
145
|
|
|
131
146
|
You can toggle on transition with the `useEffect` hook.
|
|
@@ -208,9 +223,9 @@ The `useTransition` Hook returns a tuple of values in the following order:
|
|
|
208
223
|
|
|
209
224
|
3. endTransition: `() => void`
|
|
210
225
|
|
|
211
|
-
- Call this function to stop transition which will turn state into 'entered' or 'exited'.
|
|
212
|
-
- You
|
|
213
|
-
- You
|
|
226
|
+
- Call this function to stop a transition which will turn the state into 'entered' or 'exited'.
|
|
227
|
+
- You don't need to call this function explicitly if a timeout value is provided in the hook options.
|
|
228
|
+
- You can call this function explicitly in the `onAnimationEnd` or `onTransitionEnd` event.
|
|
214
229
|
|
|
215
230
|
<br/>
|
|
216
231
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-transition-state",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.2",
|
|
4
4
|
"description": "Zero dependency React transition state machine.",
|
|
5
5
|
"author": "Zheng Song",
|
|
6
6
|
"license": "MIT",
|
|
@@ -28,38 +28,44 @@
|
|
|
28
28
|
"bundle": "rollup -c",
|
|
29
29
|
"test": "jest",
|
|
30
30
|
"eg": "npm start --prefix example",
|
|
31
|
-
"types": "
|
|
32
|
-
"tsc": "cd types && tsc",
|
|
31
|
+
"types": "cd types && tsc",
|
|
33
32
|
"lint": "eslint .",
|
|
34
33
|
"lint:fix": "eslint --fix .",
|
|
35
34
|
"pret": "prettier -c .",
|
|
36
35
|
"pret:fix": "prettier -w .",
|
|
37
|
-
"build": "run-s clean lint
|
|
36
|
+
"build": "run-s pret clean lint types bundle"
|
|
38
37
|
},
|
|
39
38
|
"peerDependencies": {
|
|
40
39
|
"react": ">=16.8.0",
|
|
41
40
|
"react-dom": ">=16.8.0"
|
|
42
41
|
},
|
|
43
42
|
"devDependencies": {
|
|
44
|
-
"@babel/core": "^7.
|
|
45
|
-
"@babel/preset-env": "^7.
|
|
46
|
-
"@
|
|
47
|
-
"@
|
|
48
|
-
"@
|
|
43
|
+
"@babel/core": "^7.25.2",
|
|
44
|
+
"@babel/preset-env": "^7.25.3",
|
|
45
|
+
"@eslint/compat": "^1.1.1",
|
|
46
|
+
"@rollup/plugin-babel": "^6.0.4",
|
|
47
|
+
"@testing-library/react": "^16.0.0",
|
|
48
|
+
"@types/jest": "^29.5.12",
|
|
49
49
|
"babel-plugin-pure-annotations": "^0.1.2",
|
|
50
|
-
"
|
|
51
|
-
"eslint": "^
|
|
52
|
-
"eslint-
|
|
53
|
-
"eslint-plugin-
|
|
54
|
-
"eslint-plugin-react-hooks": "^4.6.
|
|
55
|
-
"
|
|
56
|
-
"
|
|
50
|
+
"eslint": "^9.9.0",
|
|
51
|
+
"eslint-config-prettier": "^9.1.0",
|
|
52
|
+
"eslint-plugin-jest": "^28.8.0",
|
|
53
|
+
"eslint-plugin-react": "^7.35.0",
|
|
54
|
+
"eslint-plugin-react-hooks": "^4.6.2",
|
|
55
|
+
"eslint-plugin-react-hooks-addons": "^0.3.1",
|
|
56
|
+
"globals": "^15.9.0",
|
|
57
|
+
"jest": "^29.7.0",
|
|
58
|
+
"jest-environment-jsdom": "^29.7.0",
|
|
57
59
|
"npm-run-all": "^4.1.5",
|
|
58
|
-
"prettier": "^
|
|
59
|
-
"react": "^18.
|
|
60
|
-
"react-dom": "^18.
|
|
61
|
-
"
|
|
62
|
-
"
|
|
63
|
-
|
|
60
|
+
"prettier": "^3.3.3",
|
|
61
|
+
"react": "^18.3.1",
|
|
62
|
+
"react-dom": "^18.3.1",
|
|
63
|
+
"rollup": "^4.20.0",
|
|
64
|
+
"typescript": "^5.5.4"
|
|
65
|
+
},
|
|
66
|
+
"overrides": {
|
|
67
|
+
"eslint-plugin-react-hooks": {
|
|
68
|
+
"eslint": "$eslint"
|
|
69
|
+
}
|
|
64
70
|
}
|
|
65
71
|
}
|