with Yarn

Usage

$3

export default Example;
`

`css
.example {
transition: all 0.75s;
}

.example.preEnter,
.example.exiting {
opacity: 0;
transform: scale(0.5);
}

.example.exited {
display: none;
}
`

Edit on CodeSandbox

$3

`jsx
import styled from 'styled-components';
import { useTransitionState } from 'react-transition-state';

const Box = styled.div
transition: all 500ms;

${({ $status }) =>
($status === 'preEnter' || $status === 'exiting') &&

opacity: 0;
transform: scale(0.9);
}
;

function StyledExample() {
const [{ status, isMounted }, toggle] = useTransitionState({
timeout: 500,
mountOnEnter: true,
unmountOnExit: true,
preEnter: true
});

return (


export default StyledExample;
`

Edit on CodeSandbox

$3

Edit on CodeSandbox

$3

You can create switch transition effects using one of the provided hooks,

- 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

$3

You can toggle on transition with the useEffect hook.

`js
useEffect(() => {
toggle(true);
}, [toggle]);
`

Edit on CodeSandbox

Comparisons with _React Transition Group_

| | React Transition Group | This library |
| --- | --- | --- |
| 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 |
| 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. |
| DOM updates | _Imperative_ – commit changes into DOM imperatively to update classes | _Declarative_ – you declare what the classes look like and DOM updates are taken care of by ReactDOM |
| Render something in response to state updates | _Resort to side effects_ – rendering based on state update events | _Pure_ – rendering based on transition state |
| 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_ |
| Bundle size | ![NPM](https://bundlephobia.com/package/react-transition-group) | ✅ ![NPM](https://bundlephobia.com/package/react-transition-state) |
| Dependency count | ![NPM](https://www.npmjs.com/package/react-transition-group?activeTab=dependencies) | ✅ ![NPM](https://www.npmjs.com/package/react-transition-state?activeTab=dependencies) |

This CodeSandbox example demonstrates how the same transition can be implemented in a simpler, more declarative, and controllable manner than _React Transition Group_.

API

$3

`typescript
function useTransitionState(
options?: TransitionOptions
): [TransitionState, (toEnter?: boolean) => void, () => void];
`

#### Options

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| enter | boolean | true | Enable or disable enter phase transitions |
| exit | boolean | true | Enable or disable exit phase transitions |
| 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). |
| preExit | boolean | | Add a 'preExit' state immediately before 'exiting' |
| initialEntered | boolean | | Beginning from 'entered' state |
| mountOnEnter | boolean | | State will be 'unmounted' until hit enter phase for the first time. It allows you to create lazily mounted component. |
| unmountOnExit | boolean | | State will become 'unmounted' after 'exiting' finishes. It allows you to transition component out of DOM. |
| 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. |
| 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._ |

#### Return value

The useTransitionState Hook returns a tuple of values in the following order:

1. state:

`js
{
status: 'preEnter' |
'entering' |
'entered' |
'preExit' |
'exiting' |
'exited' |
'unmounted';
isMounted: boolean;
isEnter: boolean;
isResolved: boolean;
}
`

2. toggle: (toEnter?: boolean) => void

- If no parameter is supplied, this function will toggle state between enter and exit phases.
- You can set a boolean parameter to explicitly switch into one of the two phases.

3. endTransition: () => void

- Call this function to stop a transition which will turn the state into 'entered' or 'exited'.
- You don't need to call this function explicitly if a timeout value is provided in the hook options.
- You can call this function explicitly in the onAnimationEnd or onTransitionEnd event.

$3

It's similar to the useTransitionState Hook except that it manages multiple states in a Map structure instead of a single state.

#### Options

It accepts all options as useTransitionState and the following ones:

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| allowMultiple | boolean | | Allow multiple items to be in the enter phase at the same time. |

#### Return value

The Hook returns an object of shape:

`js
interface TransitionMapResult {
stateMap: ReadonlyMap;
toggle: (key: K, toEnter?: boolean) => void;
toggleAll: (toEnter?: boolean) => void;
endTransition: (key: K) => void;
setItem: (key: K, options?: TransitionItemOptions) => void;
deleteItem: (key: K) => boolean;
}
`

setItem and deleteItem` are used to add and remove items from the state map.

License

MIT Licensed.