react-transition-state 2.1.3 → 2.2.0

package/README.md

@@ -22,7 +22,7 @@ Inspired by the [React Transition Group](https://github.com/reactjs/react-transi
 
 ## State diagram
 
-![state-diagram](https://user-images.githubusercontent.com/41896553/142855447-cb8d8730-f8fb-4296-a3db-d1523b0fa2d9.png) 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).
+![state-diagram](https://user-images.githubusercontent.com/41896553/142855447-cb8d8730-f8fb-4296-a3db-d1523b0fa2d9.png) The `initialEntered` and `mountOnEnter` props are omitted from the diagram to keep it less convoluted. [Please read more details at the API section](#usetransitionstate-hook).
 
 <br/>
 
@@ -43,11 +43,10 @@ yarn add react-transition-state
 ### CSS example
 
 ```jsx
-import { useTransition } from 'react-transition-state';
-/* or import useTransition from 'react-transition-state'; */
+import { useTransitionState } from 'react-transition-state';
 
 function Example() {
-  const [state, toggle] = useTransition({ timeout: 750, preEnter: true });
+  const [state, toggle] = useTransitionState({ timeout: 750, preEnter: true });
   return (
     <div>
       <button onClick={() => toggle()}>toggle</button>
@@ -83,7 +82,7 @@ export default Example;
 
 ```jsx
 import styled from 'styled-components';
-import { useTransition } from 'react-transition-state';
+import { useTransitionState } from 'react-transition-state';
 
 const Box = styled.div`
   transition: all 500ms;
@@ -97,7 +96,7 @@ const Box = styled.div`
 `;
 
 function StyledExample() {
-  const [{ status, isMounted }, toggle] = useTransition({
+  const [{ status, isMounted }, toggle] = useTransitionState({
     timeout: 500,
     mountOnEnter: true,
     unmountOnExit: true,
@@ -134,7 +133,7 @@ export default StyledExample;
 
 You can create switch transition effects using one of the provided hooks,
 
-- `useTransition` if the number of elements participating in the switch transition is static.
+- `useTransitionState` if the number of elements participating in the switch transition is static.
 - `useTransitionMap` if the number of elements participating in the switch transition is dynamic and only known at runtime.
 
 **[Edit on CodeSandbox](https://codesandbox.io/p/sandbox/react-switch-transition-x87jt8)**
@@ -173,10 +172,10 @@ This [CodeSandbox example](https://codesandbox.io/s/react-transition-state-vs-gr
 
 ## API
 
-### `useTransition` Hook
+### `useTransitionState` Hook
 
 ```typescript
-function useTransition(
+function useTransitionState(
   options?: TransitionOptions
 ): [TransitionState, (toEnter?: boolean) => void, () => void];
 ```
@@ -197,7 +196,7 @@ function useTransition(
 
 #### Return value
 
-The `useTransition` Hook returns a tuple of values in the following order:
+The `useTransitionState` Hook returns a tuple of values in the following order:
 
 1. state:
 
@@ -231,11 +230,11 @@ The `useTransition` Hook returns a tuple of values in the following order:
 
 ### `useTransitionMap` Hook
 
-It's similar to the `useTransition` Hook except that it manages multiple states in a [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) structure instead of a single state.
+It's similar to the `useTransitionState` Hook except that it manages multiple states in a [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) structure instead of a single state.
 
 #### Options
 
-It accepts all options as `useTransition` and the following ones:
+It accepts all options as `useTransitionState` and the following ones:
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |

package/dist/cjs/index.js

@@ -45,7 +45,7 @@ const updateState$1 = (status, setState, latestState, timeoutId, onChange) => {
     current: state
   });
 };
-const useTransition = ({
+const useTransitionState = ({
   enter = true,
   exit = true,
   preEnter,
@@ -199,6 +199,7 @@ const useTransitionMap = ({
   };
 };
 
-exports.default = useTransition;
-exports.useTransition = useTransition;
+exports.default = useTransitionState;
+exports.useTransition = useTransitionState;
 exports.useTransitionMap = useTransitionMap;
+exports.useTransitionState = useTransitionState;

package/dist/es/hooks/{useTransition.js → useTransitionState.js}

@@ -10,7 +10,7 @@ const updateState = (status, setState, latestState, timeoutId, onChange) => {
     current: state
   });
 };
-const useTransition = ({
+const useTransitionState = ({
   enter = true,
   exit = true,
   preEnter,
@@ -57,4 +57,4 @@ const useTransition = ({
   return [state, toggle, endTransition];
 };
 
-export { useTransition };
+export { useTransitionState };

package/dist/es/index.js

@@ -1,2 +1,2 @@
-export { useTransition as default, useTransition } from './hooks/useTransition.js';
+export { useTransitionState as default, useTransitionState as useTransition, useTransitionState } from './hooks/useTransitionState.js';
 export { useTransitionMap } from './hooks/useTransitionMap.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-transition-state",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "description": "Zero dependency React transition state machine.",
   "author": "Zheng Song",
   "license": "MIT",
@@ -45,7 +45,7 @@
     "@eslint/compat": "^1.1.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@testing-library/react": "^16.0.1",
-    "@types/jest": "^29.5.13",
+    "@types/jest": "^29.5.14",
     "babel-plugin-pure-annotations": "^0.1.2",
     "eslint": "^9.9.1",
     "eslint-config-prettier": "^9.1.0",
@@ -53,7 +53,7 @@
     "eslint-plugin-react": "^7.37.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-hooks-addons": "^0.3.1",
-    "globals": "^15.10.0",
+    "globals": "^15.11.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "npm-run-all": "^4.1.5",
@@ -61,7 +61,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rollup": "^4.24.0",
-    "typescript": "^5.6.2"
+    "typescript": "^5.6.3"
   },
   "overrides": {
     "eslint-plugin-react-hooks": {

package/types/index.d.ts

@@ -46,8 +46,18 @@ export interface TransitionMapResult<K> {
   deleteItem: (key: K) => boolean;
 }
 
-export const useTransition: (options?: TransitionOptions) => TransitionResult;
+export const useTransitionState: (options?: TransitionOptions) => TransitionResult;
 
 export const useTransitionMap: <K>(options?: TransitionMapOptions<K>) => TransitionMapResult<K>;
 
-export default useTransition;
+export {
+  /**
+   * @deprecated The `useTransition` alias will be removed in v3.0.0. Use `useTransitionState` instead.
+   */
+  useTransitionState as useTransition
+};
+
+/**
+ * @deprecated The default export will be removed in v3.0.0. Use the named export `useTransitionState` instead.
+ */
+export default useTransitionState;