Merge pull request #694 from szhsin/feat/rename-hook

feat: rename hook

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 |
 | --- | --- | --- | --- |

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;

dist/es/hooks/useTransition.js → dist/es/hooks/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 };

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';

example/src/components/BasicExample.js

@@ -1,10 +1,10 @@
 import { useState } from 'react';
-import useTransition from 'react-transition-state';
+import { useTransitionState } from 'react-transition-state';
 import { CodeSandbox } from './CodeSandbox';
 
 const BasicExample = () => {
   const [unmountOnExit, setUnmountOnExit] = useState(true);
-  const [{ status, isMounted }, toggle] = useTransition({
+  const [{ status, isMounted }, toggle] = useTransitionState({
     timeout: 500,
     initialEntered: true,
     preEnter: true,

example/src/components/StyledExample.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { useTransition } from 'react-transition-state';
+import { useTransitionState } from 'react-transition-state';
 import { CodeSandbox } from './CodeSandbox';
 
 const Container = styled.div`
@@ -25,7 +25,7 @@ const Box = styled.div`
 `;
 
 const StyledExample = () => {
-  const [{ status, isMounted }, toggle] = useTransition({
+  const [{ status, isMounted }, toggle] = useTransitionState({
     timeout: 500,
     mountOnEnter: true,
     unmountOnExit: true,

example/src/components/SwitchTransition.js

@@ -1,7 +1,7 @@
-import { useTransition } from 'react-transition-state';
+import { useTransitionState } from 'react-transition-state';
 
 // Ideal for creating switch transition for a small number of elements
-// Use `useTransition` hook once for each element in the switch transition
+// Use `useTransitionState` hook once for each element in the switch transition
 export const SwitchTransition = () => {
   const transitionProps = {
     timeout: 300,
@@ -10,11 +10,11 @@ export const SwitchTransition = () => {
     preEnter: true
   };
 
-  const [state1, toggle1] = useTransition({
+  const [state1, toggle1] = useTransitionState({
     ...transitionProps,
     initialEntered: true
   });
-  const [state2, toggle2] = useTransition(transitionProps);
+  const [state2, toggle2] = useTransitionState(transitionProps);
   const toggle = () => {
     toggle1();
     toggle2();

example/src/components/SwitchTransitionMap.js

@@ -3,7 +3,7 @@ import { useTransitionMap } from 'react-transition-state';
 
 // Creating switch transitions for a large number of elements,
 // or the number of elements is only known at runtime.
-// `useTransition` doesn't suffice as React hook has the limitation that it cannot be called in a loop
+// `useTransitionState` doesn't suffice as React hook has the limitation that it cannot be called in a loop
 const NUMBER_OF_BUTTONS = 5;
 const buttonArray = new Array(NUMBER_OF_BUTTONS).fill(0).map((_, i) => `Button ${i + 1}`);
 

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",

src/__tests__/useTransition.test.js → src/__tests__/useTransitionState.test.js

@@ -1,6 +1,6 @@
 import { renderHook, act, waitFor } from '@testing-library/react';
 import { STATUS } from './testUtils';
-import { useTransition } from '../';
+import { useTransitionState } from '../';
 
 const getOnChangeParams = (status) => ({ current: expect.objectContaining({ status }) });
 
@@ -42,7 +42,7 @@ const renderTransitionHook = (options) => {
   const render = jest.fn();
   const { result, ...rest } = renderHook((props) => {
     render();
-    return useTransition(props);
+    return useTransitionState(props);
   }, options);
 
   return { result: new Result(result), render, ...rest };

src/hooks/useTransition.js → src/hooks/useTransitionState.js

@@ -20,7 +20,7 @@ const updateState = (status, setState, latestState, timeoutId, onChange) => {
   onChange && onChange({ current: state });
 };
 
-export const useTransition = ({
+export const useTransitionState = ({
   enter = true,
   exit = true,
   preEnter,

src/index.js

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

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;