react-transition-state

React-Transition-State

Why?

This tiny 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:

• Works with both CSS animation and transition.
• NO derived state.
• Efficient: each state transition results in at most one extract render for your component.
• Tiny in size: ideal for both component libraries and applications.

Install

# with npm
npm install react-transition-state

# with Yarn
yarn add react-transition-state

Usage

import { useTransition } from 'react-transition-state';

function Example() {
  const [state, toggle] = useTransition({ timeout: 750, preState: 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;
}