# react-motion-ui-pack

> Addon component wrappers for common UI transitions.

Latest version **0.10.3** (published 2017-06-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-motion-ui-pack
pnpm add react-motion-ui-pack
yarn add react-motion-ui-pack
bun add react-motion-ui-pack
```

## Health

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

Positive: has types package; no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.10.3 |
| Published | 2017-06-25 |
| First published | 2015-07-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-motion-ui-pack) |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 622 |
| Author | Travis Arnold |
| Maintainers | souporserious |
| Keywords | react, component, react-component, ui, motion, transition, animation |

## Links

- npm: https://www.npmjs.com/package/react-motion-ui-pack
- Repository: https://github.com/souporserious/react-motion-ui-pack
- Issues: https://github.com/souporserious/react-motion-ui-pack/issues
- npm.io page: https://npm.io/package/react-motion-ui-pack

## Dependencies (3)

- [get-prefix](https://npm.io/package/get-prefix.md) ^1.0.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [react-motion](https://npm.io/package/react-motion.md) ^0.4.5

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 0.10.3 (latest) — 2017-06-25
- 0.10.2 — 2016-10-14
- 0.10.1 — 2016-10-13
- 0.10.0 — 2016-10-13
- 0.9.0 — 2016-07-21
- 0.8.0 — 2016-06-27
- 0.7.4 — 2016-06-15
- 0.7.3 — 2016-04-30
- 0.7.2 — 2016-04-25
- 0.7.1 — 2016-04-18
- 0.7.0 — 2016-04-13
- 0.6.1 — 2016-03-09
- 0.6.0 — 2016-02-04
- 0.5.2 — 2015-11-17
- 0.5.1 — 2015-11-07
- … 22 more at https://npm.io/package/react-motion-ui-pack/versions

## README

## React Motion UI Pack

[![npm version](https://badge.fury.io/js/react-motion-ui-pack.svg)](https://badge.fury.io/js/react-motion-ui-pack)
[![Dependency Status](https://david-dm.org/souporserious/react-motion-ui-pack.svg)](https://david-dm.org/souporserious/react-motion-ui-pack)
[![CDNJS](https://img.shields.io/cdnjs/v/react-motion-ui-pack.svg)](https://cdnjs.com/libraries/react-motion-ui-pack)

[React Motion](https://github.com/chenglou/react-motion) is an amazing animation library for React. React Motion UI Pack tries to help ease entry level / common use cases with React Motion by providing a higher level way to work with it and create common UI transitions easier. If you need more complex animations I suggest using React Motion directly.

### Usage

`yarn add react-motion-ui-pack`

`npm install react-motion-ui-pack --save`

```html
<script src="https://unpkg.com/react-motion-ui-pack/dist/react-motion-ui-pack.js"></script>
(UMD library exposed as `Transition`)
```

### Example

```js

import Transition from 'react-motion-ui-pack'

// Animate a list of items as they are added
<Transition
  component="ul"
  enter={{
    opacity: 1,
  }}
  leave={{
    opacity: 0,
  }}
>  
  { this.state.items.map(item =>
      <li key={item.id}>{item.content}</li>
    )
  }
</Transition>

// Animate a modal
<Transition
  component={false} // don't use a wrapping component
  enter={{
    opacity: 1,
    translateY: spring(0, {stiffness: 400, damping: 10})
  }}
  leave={{
    opacity: 0,
    translateY: 250
  }}
>
  { this.state.modalOpen &&
    <div key="modal" className="modal__content">
      // modal code
    </div>
  }
</Transition>
```

## Props

#### `component`: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, isElement])

Define the wrapping tag/component around the children passed in, pass `false` to not use a wrapping component at all for only child components.

#### `runOnMount`: PropTypes.bool

Determines whether the animation runs on mount or not

#### `appear`: PropTypes.object

Where the animation starts, defaults to leave value if nothing passed

#### `enter`: PropTypes.object

The resting state of the animation

#### `leave`: PropTypes.object

The ending value of the animation

#### `onEnter`: PropTypes.func

Callback right before an element enters, passes in your current animating values `onEnter={currentValues => /* do something */}` called only once.

#### `onLeave`: PropTypes.func

Same as `onEnter`, but fires multiple times as an element is leaving.

## FAQ

#### How `appear`, `enter`, & `leave` work

These values are automatically wrapped in a React Motion `spring` to keep the API simple. If you need a custom config you can pass your own spring e.g. `spring(22, { stiffness: 30, damping: 300 })`.

#### My animation values aren't being applied to any elements

If you decide to use a custom component as a child, `style` and `dimensions` props will be passed into that component for you to use however you want. If you pass a regular React DOM element, `<Transition/>` will take care of applying the values for you by cloning your element and passing it in.

## Running Locally

clone repo

`git clone git@github.com:souporserious/react-motion-ui-pack.git`

move into folder

`cd ~/react-motion-ui-pack`

install dependencies

`npm install`

run dev mode

`npm run dev`

open your browser and visit: `http://localhost:8080/`

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