react-transition-state 2.0.1 → 2.0.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.
Files changed (6) hide show
  1. package/README.md +2 -2
  2. package/dist/cjs/index.js +8 -8
  3. package/dist/es/hooks/useTransition.js +1 -1
  4. package/dist/es/hooks/useTransitionMap.js +1 -1
  5. package/dist/es/hooks/utils.js +6 -6
  6. package/package.json +7 -7
package/README.md CHANGED
@@ -147,7 +147,7 @@ useEffect(() => {
147
147
  | 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 |
148
148
  | 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. |
149
149
  | 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` |
150
- | 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) |
150
+ | 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:1010-1191) | _Pure_ – rendering based on [transition state](https://codesandbox.io/s/react-transition-state-vs-group-p45iy?file=/src/App.js:2168-2342) |
151
151
  | 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_ |
152
152
  | Bundle size | [![NPM](https://img.shields.io/bundlephobia/minzip/react-transition-group)](https://bundlephobia.com/package/react-transition-group) | ✅ [![NPM](https://img.shields.io/bundlephobia/minzip/react-transition-state)](https://bundlephobia.com/package/react-transition-state) |
153
153
  | Dependency count | [![NPM](https://badgen.net/bundlephobia/dependency-count/react-transition-group)](https://www.npmjs.com/package/react-transition-group?activeTab=dependencies) | ✅ [![NPM](https://badgen.net/bundlephobia/dependency-count/react-transition-state)](https://www.npmjs.com/package/react-transition-state?activeTab=dependencies) |
@@ -178,7 +178,7 @@ function useTransition(
178
178
  | `mountOnEnter` | boolean | | State will be 'unmounted' until hit enter phase for the first time. It allows you to create lazily mounted component. |
179
179
  | `unmountOnExit` | boolean | | State will become 'unmounted' after 'exiting' finishes. It allows you to transition component out of DOM. |
180
180
  | `timeout` | number \| <br />{ enter?: number; exit?: number; } | | Set timeout in **ms** for transitions; you can set a single value or different values for enter and exit transitions. |
181
- | `onChange` | (event: { state: string }) => void | | Event fired when state has changed. <br/><br/>Prefer to read state from the hook function return value directly unless you want to perform some side effects in response to state changes. <br/><br/>_Note: create an event handler with `useCallback` if you need to keep `toggle` or `endTransition` function's identity stable across re-renders._ |
181
+ | `onStateChange` | (event: { current: TransitionState }) => void | | Event fired when state has changed. <br/><br/>Prefer to read state from the hook function return value directly unless you want to perform some side effects in response to state changes. <br/><br/>_Note: create an event handler with `useCallback` if you need to keep `toggle` or `endTransition` function's identity stable across re-renders._ |
182
182
 
183
183
  #### Return value
184
184
 
package/dist/cjs/index.js CHANGED
@@ -12,13 +12,13 @@ var EXITING = 4;
12
12
  var EXITED = 5;
13
13
  var UNMOUNTED = 6;
14
14
  var STATUS = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
15
- var getState = function getState(_status) {
15
+ var getState = function getState(status) {
16
16
  return {
17
- _status: _status,
18
- status: STATUS[_status],
19
- isEnter: _status < PRE_EXIT,
20
- isMounted: _status !== UNMOUNTED,
21
- isResolved: _status === ENTERED || _status > EXITING
17
+ _status: status,
18
+ status: STATUS[status],
19
+ isEnter: status < PRE_EXIT,
20
+ isMounted: status !== UNMOUNTED,
21
+ isResolved: status === ENTERED || status > EXITING
22
22
  };
23
23
  };
24
24
  var startOrEnd = function startOrEnd(unmounted) {
@@ -102,7 +102,7 @@ var useTransition = function useTransition(_temp) {
102
102
  }
103
103
  };
104
104
 
105
- var enterStage = latestState.current._status <= ENTERED;
105
+ var enterStage = latestState.current.isEnter;
106
106
  if (typeof toEnter !== 'boolean') toEnter = !enterStage;
107
107
 
108
108
  if (toEnter) {
@@ -256,7 +256,7 @@ var useTransitionMap = function useTransitionMap(_temp) {
256
256
  }
257
257
  };
258
258
 
259
- var enterStage = stateObj._status <= ENTERED;
259
+ var enterStage = stateObj.isEnter;
260
260
  if (typeof toEnter !== 'boolean') toEnter = !enterStage;
261
261
 
262
262
  if (toEnter) {
package/dist/es/hooks/useTransition.js CHANGED
@@ -64,7 +64,7 @@ var useTransition = function useTransition(_temp) {
64
64
  }
65
65
  };
66
66
 
67
- var enterStage = latestState.current._status <= ENTERED;
67
+ var enterStage = latestState.current.isEnter;
68
68
  if (typeof toEnter !== 'boolean') toEnter = !enterStage;
69
69
 
70
70
  if (toEnter) {
package/dist/es/hooks/useTransitionMap.js CHANGED
@@ -138,7 +138,7 @@ var useTransitionMap = function useTransitionMap(_temp) {
138
138
  }
139
139
  };
140
140
 
141
- var enterStage = stateObj._status <= ENTERED;
141
+ var enterStage = stateObj.isEnter;
142
142
  if (typeof toEnter !== 'boolean') toEnter = !enterStage;
143
143
 
144
144
  if (toEnter) {
package/dist/es/hooks/utils.js CHANGED
@@ -6,13 +6,13 @@ var EXITING = 4;
6
6
  var EXITED = 5;
7
7
  var UNMOUNTED = 6;
8
8
  var STATUS = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
9
- var getState = function getState(_status) {
9
+ var getState = function getState(status) {
10
10
  return {
11
- _status: _status,
12
- status: STATUS[_status],
13
- isEnter: _status < PRE_EXIT,
14
- isMounted: _status !== UNMOUNTED,
15
- isResolved: _status === ENTERED || _status > EXITING
11
+ _status: status,
12
+ status: STATUS[status],
13
+ isEnter: status < PRE_EXIT,
14
+ isMounted: status !== UNMOUNTED,
15
+ isResolved: status === ENTERED || status > EXITING
16
16
  };
17
17
  };
18
18
  var startOrEnd = function startOrEnd(unmounted) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-transition-state",
3
- "version": "2.0.1",
3
+ "version": "2.0.2",
4
4
  "description": "Zero dependency React transition state machine.",
5
5
  "author": "Zheng Song",
6
6
  "license": "MIT",
@@ -41,25 +41,25 @@
41
41
  "react-dom": ">=16.8.0"
42
42
  },
43
43
  "devDependencies": {
44
- "@babel/core": "^7.18.10",
44
+ "@babel/core": "^7.18.13",
45
45
  "@babel/preset-env": "^7.18.10",
46
46
  "@rollup/plugin-babel": "^5.3.1",
47
47
  "@testing-library/react": "^13.3.0",
48
- "@types/jest": "^28.1.7",
48
+ "@types/jest": "^29.0.0",
49
49
  "babel-plugin-pure-annotations": "^0.1.2",
50
50
  "dtslint": "^4.1.6",
51
51
  "eslint": "^8.22.0",
52
52
  "eslint-config-prettier": "^8.5.0",
53
- "eslint-plugin-jest": "^26.8.3",
53
+ "eslint-plugin-jest": "^26.9.0",
54
54
  "eslint-plugin-react-hooks": "^4.6.0",
55
- "jest": "^28.1.3",
56
- "jest-environment-jsdom": "^28.1.3",
55
+ "jest": "^29.0.1",
56
+ "jest-environment-jsdom": "^29.0.1",
57
57
  "npm-run-all": "^4.1.5",
58
58
  "prettier": "^2.7.1",
59
59
  "react": "^18.2.0",
60
60
  "react-dom": "^18.2.0",
61
61
  "regenerator-runtime": "^0.13.9",
62
- "rollup": "^2.77.2",
62
+ "rollup": "^2.79.0",
63
63
  "typescript": "^4.7.4"
64
64
  }
65
65
  }