React animating states

React components to create animation between two or more components.

Examples

• Basic

Code example

import React, { useState } from "react";
import { AnimatingStates, State } from "react-animating-states";

export const Basic = () => {
  const [state, setState] = useState(null);
  return (
    <div>
      <h2>Basic</h2>
      <button onClick={() => setState("A")}>A</button>
      <button onClick={() => setState("B")}>B</button>
      <button onClick={() => setState("C")}>C</button>
      <button onClick={() => setState(null)}>Null</button>
      <AnimatingStates state={state}>
        <State name="A" style={{ border: "1px solid yellow" }}>
          A
        </State>
        <State name="B" style={{ border: "1px solid blue" }}>
          B <br />B <br />B <br />B <br />
        </State>
        <State name="C" style={{ border: "1px solid red" }}>
          C <br />C <br />C <br />C <br />C <br />C <br />C <br />C <br />
        </State>
      </AnimatingStates>
    </div>
  );
};

export default Basic;

AnimatingStates props

| Name | Type | Description | | -------------- | ---------------- | -------------------------------- | | animateOnMount | PropTypes.bool | Animate when mount the component | | children | PropTypes.node | Any react node | | duration | PropTypes.number | Animation duration | | state | PropTypes.string | Active state | | onAnimateStart | PropTypes.func | Called when the animation starts | | onAnimateEnd | PropTypes.func | Called when the animation ends |

States props

| Name | Type | Description | | -------- | ---------------- | -------------- | | name | PropTypes.string | State name | | children | PropTypes.node | Any react node |