This message is being transitioned in and out of the DOM.
\n \n \n )}\n
\n );\n}\n\nexport default StyledExample;\n```\n\n**[Edit on CodeSandbox](https://codesandbox.io/s/react-transition-styled-3id7q)**\n\n \n\n### tailwindcss example\n\n**[Edit on CodeSandbox](https://codesandbox.io/s/react-transition-tailwindcss-21nys)**\n\n \n\n### Switch transition\n\nYou can create switch transition effects using one of the provided hooks,\n\n- `useTransitionState` if the number of elements participating in the switch transition is static.\n- `useTransitionMap` if the number of elements participating in the switch transition is dynamic and only known at runtime.\n\n**[Edit on CodeSandbox](https://codesandbox.io/p/sandbox/react-switch-transition-x87jt8)**\n\n \n\n### Perform appearing transition when page loads or a component mounts\n\nYou can toggle on transition with the `useEffect` hook.\n\n```js\nuseEffect(() => {\n toggle(true);\n}, [toggle]);\n```\n\n**[Edit on CodeSandbox](https://codesandbox.io/s/react-transition-appear-9kkss3)**\n\n \n\n## Comparisons with _React Transition Group_\n\n| | React Transition Group | This library |\n| --- | --- | --- |\n| 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 |\n| Controlled | _No_ ā Transition state is managed internally. Resort to callback events to read the internal state. | _Yes_ ā Transition state is _lifted_ up into the consuming component. You have direct access to the transition state. |\n| 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` |\n| 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) |\n| Working with _styled-components_ | Your code looks like ā `&.box-exit-active { opacity: 0; }` `&.box-enter-active { opacity: 1; }` | Your code looks like ā `opacity: ${({ state }) => (state === 'exiting' ? '0' : '1')};` It's the way how you normally use the _styled-components_ |\n| Bundle size | [](https://bundlephobia.com/package/react-transition-group) | ā [](https://bundlephobia.com/package/react-transition-state) |\n| Dependency count | [](https://www.npmjs.com/package/react-transition-group?activeTab=dependencies) | ā [](https://www.npmjs.com/package/react-transition-state?activeTab=dependencies) |\n\nThis [CodeSandbox example](https://codesandbox.io/s/react-transition-state-vs-group-p45iy) demonstrates how the same transition can be implemented in a simpler, more declarative, and controllable manner than _React Transition Group_.\n\n \n\n## API\n\n### `useTransitionState` Hook\n\n```typescript\nfunction useTransitionState(\n options?: TransitionOptions\n): [TransitionState, (toEnter?: boolean) => void, () => void];\n```\n\n#### Options\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `enter` | boolean | true | Enable or disable enter phase transitions |\n| `exit` | boolean | true | Enable or disable exit phase transitions |\n| `preEnter` | boolean | | Add a 'preEnter' state immediately before 'entering', which is necessary to change DOM elements from unmounted or `display: none` with CSS transition (not necessary for CSS animation). |\n| `preExit` | boolean | | Add a 'preExit' state immediately before 'exiting' |\n| `initialEntered` | boolean | | Beginning from 'entered' state |\n| `mountOnEnter` | boolean | | State will be 'unmounted' until hit enter phase for the first time. It allows you to create lazily mounted component. |\n| `unmountOnExit` | boolean | | State will become 'unmounted' after 'exiting' finishes. It allows you to transition component out of DOM. |\n| `timeout` | number \\| { enter?: number; exit?: number; } | | Set timeout in **ms** for transitions; you can set a single value or different values for enter and exit transitions. |\n| `onStateChange` | (event: { current: TransitionState }) => void | | Event fired when state has changed.
Prefer to read state from the hook function return value directly unless you want to perform some side effects in response to state changes.
_Note: create an event handler with `useCallback` if you need to keep `toggle` or `endTransition` function's identity stable across re-renders._ |\n\n#### Return value\n\nThe `useTransitionState` Hook returns a tuple of values in the following order:\n\n1. state:\n\n```js\n{\n status: 'preEnter' |\n 'entering' |\n 'entered' |\n 'preExit' |\n 'exiting' |\n 'exited' |\n 'unmounted';\n isMounted: boolean;\n isEnter: boolean;\n isResolved: boolean;\n}\n```\n\n2. toggle: `(toEnter?: boolean) => void`\n\n- If no parameter is supplied, this function will toggle state between enter and exit phases.\n- You can set a boolean parameter to explicitly switch into one of the two phases.\n\n3. endTransition: `() => void`\n\n- Call this function to stop a transition which will turn the state into 'entered' or 'exited'.\n- You don't need to call this function explicitly if a timeout value is provided in the hook options.\n- You can call this function explicitly in the `onAnimationEnd` or `onTransitionEnd` event.\n\n \n\n### `useTransitionMap` Hook\n\nIt'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.\n\n#### Options\n\nIt accepts all options as `useTransitionState` and the following ones:\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `allowMultiple` | boolean | | Allow multiple items to be in the enter phase at the same time. |\n\n#### Return value\n\nThe Hook returns an object of shape:\n\n```js\ninterface TransitionMapResult {\n stateMap: ReadonlyMap;\n toggle: (key: K, toEnter?: boolean) => void;\n toggleAll: (toEnter?: boolean) => void;\n endTransition: (key: K) => void;\n setItem: (key: K, options?: TransitionItemOptions) => void;\n deleteItem: (key: K) => boolean;\n}\n```\n\n`setItem` and `deleteItem` are used to add and remove items from the state map.\n\n## License\n\n[MIT](https://github.com/szhsin/react-transition-state/blob/master/LICENSE) Licensed.\n","readmeFilename":"README.md"}