# react-animating-states

> React components to create animation between two or more components.

Latest version **0.1.2** (published 2020-01-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-animating-states
pnpm add react-animating-states
yarn add react-animating-states
bun add react-animating-states
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2020-01-21 |
| First published | 2020-01-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 27.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ruihbanki |

## Links

- npm: https://www.npmjs.com/package/react-animating-states
- npm.io page: https://npm.io/package/react-animating-states

## Recent versions

- 0.1.2 (latest) — 2020-01-21
- 0.1.1 — 2020-01-20
- 0.1.0 — 2020-01-19

## README

# React animating states

React components to create animation between two or more components.

## Examples

- [Basic](https://codesandbox.io/s/react-animating-states-givg7)

## Code example

```JSX
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 |

---
_Source: https://npm.io/package/react-animating-states · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._