react-transition-state 2.1.1 → 2.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.
Files changed (5) hide show
  1. package/README.md +21 -6
  2. package/dist/cjs/index.js +2 -4
  3. package/dist/es/hooks/useTransition.js +1 -1
  4. package/dist/es/hooks/useTransitionMap.js +3 -5
  5. 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
  [![NPM](https://img.shields.io/npm/v/react-transition-state.svg)](https://www.npmjs.com/package/react-transition-state) [![NPM](https://img.shields.io/npm/dm/react-transition-state)](https://www.npmjs.com/package/react-transition-state) [![NPM](https://img.shields.io/bundlephobia/minzip/react-transition-state)](https://bundlephobia.com/package/react-transition-state) [![Known Vulnerabilities](https://snyk.io/test/github/szhsin/react-transition-state/badge.svg)](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 will normally call this function in the `onAnimationEnd` or `onTransitionEnd` event.
213
- - You need to either call this function explicitly in your code or set a timeout value in Hook options.
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/dist/cjs/index.js CHANGED
@@ -92,8 +92,6 @@ const useTransition = ({
92
92
  return [state, toggle, endTransition];
93
93
  };
94
94
 
95
- const initialStateMap = new Map();
96
- const initialConfigMap = new Map();
97
95
  const updateState = (key, status, setStateMap, latestStateMap, timeoutId, onChange) => {
98
96
  clearTimeout(timeoutId);
99
97
  const state = getState(status);
@@ -118,9 +116,9 @@ const useTransitionMap = ({
118
116
  unmountOnExit,
119
117
  onStateChange: onChange
120
118
  } = {}) => {
121
- const [stateMap, setStateMap] = react.useState(initialStateMap);
119
+ const [stateMap, setStateMap] = react.useState(new Map());
122
120
  const latestStateMap = react.useRef(stateMap);
123
- const configMap = react.useRef(initialConfigMap);
121
+ const configMap = react.useRef(new Map());
124
122
  const [enterTimeout, exitTimeout] = getTimeout(timeout);
125
123
  const setItem = react.useCallback((key, config) => {
126
124
  const {
package/dist/es/hooks/useTransition.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { useState, useRef, useCallback, useEffect } from 'react';
2
- import { getState, ENTERED, startOrEnd, getEndStatus, PRE_EXIT, EXITING, getTimeout, nextTick, PRE_ENTER, ENTERING } from './utils.js';
2
+ import { getState, ENTERED, startOrEnd, getTimeout, getEndStatus, PRE_EXIT, nextTick, PRE_ENTER, EXITING, ENTERING } from './utils.js';
3
3
 
4
4
  const updateState = (status, setState, latestState, timeoutId, onChange) => {
5
5
  clearTimeout(timeoutId.current);
package/dist/es/hooks/useTransitionMap.js CHANGED
@@ -1,8 +1,6 @@
1
1
  import { useState, useRef, useCallback } from 'react';
2
- import { ENTERED, startOrEnd, getEndStatus, PRE_EXIT, EXITING, getTimeout, nextTick, PRE_ENTER, ENTERING, getState } from './utils.js';
2
+ import { getTimeout, getEndStatus, PRE_EXIT, nextTick, PRE_ENTER, EXITING, ENTERING, ENTERED, startOrEnd, getState } from './utils.js';
3
3
 
4
- const initialStateMap = new Map();
5
- const initialConfigMap = new Map();
6
4
  const updateState = (key, status, setStateMap, latestStateMap, timeoutId, onChange) => {
7
5
  clearTimeout(timeoutId);
8
6
  const state = getState(status);
@@ -27,9 +25,9 @@ const useTransitionMap = ({
27
25
  unmountOnExit,
28
26
  onStateChange: onChange
29
27
  } = {}) => {
30
- const [stateMap, setStateMap] = useState(initialStateMap);
28
+ const [stateMap, setStateMap] = useState(new Map());
31
29
  const latestStateMap = useRef(stateMap);
32
- const configMap = useRef(initialConfigMap);
30
+ const configMap = useRef(new Map());
33
31
  const [enterTimeout, exitTimeout] = getTimeout(timeout);
34
32
  const setItem = useCallback((key, config) => {
35
33
  const {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-transition-state",
3
- "version": "2.1.1",
3
+ "version": "2.1.3",
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": "dtslint --localTs node_modules/typescript/lib 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 pret bundle types"
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.22.5",
45
- "@babel/preset-env": "^7.22.5",
46
- "@rollup/plugin-babel": "^6.0.3",
47
- "@testing-library/react": "^14.0.0",
48
- "@types/jest": "^29.5.2",
43
+ "@babel/core": "^7.25.7",
44
+ "@babel/preset-env": "^7.25.4",
45
+ "@eslint/compat": "^1.1.1",
46
+ "@rollup/plugin-babel": "^6.0.4",
47
+ "@testing-library/react": "^16.0.1",
48
+ "@types/jest": "^29.5.13",
49
49
  "babel-plugin-pure-annotations": "^0.1.2",
50
- "dtslint": "^4.1.6",
51
- "eslint": "^8.41.0",
52
- "eslint-config-prettier": "^8.8.0",
53
- "eslint-plugin-jest": "^27.2.1",
54
- "eslint-plugin-react-hooks": "^4.6.0",
55
- "jest": "^29.5.0",
56
- "jest-environment-jsdom": "^29.5.0",
50
+ "eslint": "^9.9.1",
51
+ "eslint-config-prettier": "^9.1.0",
52
+ "eslint-plugin-jest": "^28.8.3",
53
+ "eslint-plugin-react": "^7.37.1",
54
+ "eslint-plugin-react-hooks": "^4.6.2",
55
+ "eslint-plugin-react-hooks-addons": "^0.3.1",
56
+ "globals": "^15.10.0",
57
+ "jest": "^29.7.0",
58
+ "jest-environment-jsdom": "^29.7.0",
57
59
  "npm-run-all": "^4.1.5",
58
- "prettier": "^2.8.8",
59
- "react": "^18.2.0",
60
- "react-dom": "^18.2.0",
61
- "regenerator-runtime": "^0.13.11",
62
- "rollup": "^3.25.1",
63
- "typescript": "^5.1.3"
60
+ "prettier": "^3.3.3",
61
+ "react": "^18.3.1",
62
+ "react-dom": "^18.3.1",
63
+ "rollup": "^4.24.0",
64
+ "typescript": "^5.6.2"
65
+ },
66
+ "overrides": {
67
+ "eslint-plugin-react-hooks": {
68
+ "eslint": "$eslint"
69
+ }
64
70
  }
65
71
  }