react-transition-state

React-Transition-State

Why?

This library was inspired by the React Transition Group. It allows you to easily perform animations/transitions of your React component in a fully controlled manner:

• 🍭 Working with both CSS animation and transition.
• 🔄 Moving React components in and out of DOM seamlessly.
• 🚫 Using no derived state.
• 🚀 Efficient: each state transition results in at most one extract render for your component.
• 🤏 Tiny: ideal for both component libraries and applications.

🤔 Not convinced? See a comparison with React Transition Group

Install

# with npm
npm install react-transition-state

# with Yarn
yarn add react-transition-state

Usage

import { useTransition } from 'react-transition-state';
/* or import useTransition from 'react-transition-state'; */

function Example() {
  const [state, toggle] = useTransition({ timeout: 750, preEnter: true });
  return (
    <div>
      <button onClick={() => toggle()}>toggle</button>
      <div className={`example ${state}`}>React transition state</div>
    </div>
  );
}

export default Example;

.example {
  transition: all 0.75s;
}

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

.example.exited {
  display: none;
}

Edit on CodeSandbox

styled-components example

import React from 'react';
import styled from 'styled-components';
import { useTransition } from 'react-transition-state';

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

  ${({ state }) =>
    (state === 'preEnter' || state === 'exiting') &&
    `
      opacity: 0;
      transform: scale(0.9);
    `}
`;

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

  const showButton = state === 'unmounted';
  return (
    <div>
      {showButton && <button onClick={() => toggle(true)}>Show Message</button>}
      {!showButton && (
        <Box state={state}>
          <h1>state: {state}</h1>
          <p>This message is being transitioned in and out of the DOM.</p>
          <button onClick={() => toggle(false)}>Close</button>
        </Box>
      )}
    </div>
  );
}

export default StyledExample;

Edit on CodeSandbox

Comparisons with React Transition Group

	React Transition Group	This library
Use derived state	Yes – using an in prop to trigger changes in a separate 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
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

This CodeSandbox example demonstrates how the same transition can be implemented in a more simplified, declarative, and controllable manner than React Transition Group.

API

useTransition Hook

function useTransition(
  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'
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.

Return value

The useTransition Hook returns an array of values in the following order:

1. state: 'preEnter' | 'entering' | 'entered' | 'preExit' | 'exiting' | 'exited' | 'unmounted'
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.

1. endTransition: () => void

• Call this function to stop transition which will turn state into 'entered' or 'exited'.
• You will normally call this function in the onAnimationEnd or onTransitionEnd event.
• You must either call this function explicitly in your code or set a timeout value in Hook options.

License

MIT Licensed.