# data-driven-motion

> Declarative animation in react.

Latest version **0.0.11** (published 2017-06-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install data-driven-motion
pnpm add data-driven-motion
yarn add data-driven-motion
bun add data-driven-motion
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.11 |
| Published | 2017-06-01 |
| First published | 2017-03-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 550 |
| Author | Kye Hohenberger |
| Maintainers | tkh44 |
| Keywords | react, react-motion, animtion, react-animation, data, driven, motion |

## Links

- npm: https://www.npmjs.com/package/data-driven-motion
- Repository: https://github.com/tkh44/data-driven-motion
- Homepage: https://github.com/tkh44/data-driven-motion#readme
- Issues: https://github.com/tkh44/data-driven-motion/issues
- npm.io page: https://npm.io/package/data-driven-motion

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [react-motion](https://npm.io/package/react-motion.md) ^0.4.7

## 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.0.11 (latest) — 2017-06-01
- 0.0.10 — 2017-04-02
- 0.0.9 — 2017-03-07
- 0.0.8 — 2017-03-07
- 0.0.7 — 2017-03-07
- 0.0.6 — 2017-03-06
- 0.0.5 — 2017-03-06
- 0.0.4 — 2017-03-02
- 0.0.3 — 2017-03-02
- 0.0.2 — 2017-03-01

## README

# data-driven-motion

[![npm version](https://badge.fury.io/js/data-driven-motion.svg)](https://badge.fury.io/js/data-driven-motion)
[![Build Status](https://travis-ci.org/tkh44/data-driven-motion.svg?branch=master)](https://travis-ci.org/tkh44/data-driven-motion)
[![codecov](https://codecov.io/gh/tkh44/data-driven-motion/branch/master/graph/badge.svg)](https://codecov.io/gh/tkh44/data-driven-motion)
[![Standard - JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://img.shields.io/badge/code_style-standard-brightgreen.svg)



Easily animate your data in react

This is a small wrapper around [react-motion](https://github.com/chenglou/react-motion) with the intention of simplifying the api for my most common use case.

## [Demos and Docs](https://tkh44.github.io/data-driven-motion/)

```bash
npm install -S data-driven-motion
```

## Motion

```jsx
<Motion
  data={[]}
  component={<ul style={{ padding: 8 }} />}
  render={(key, data, style) => <li key={key} style={style}>{data.name}</li>}
  getKey={data => data.name}
  onComponentMount={data => ({ top: data.top, left: data.left })}
  onRender={(data, i, spring) => ({ top: spring(data.top), left: spring(data.left) })}
  onRemount={({ data }) => ({ top: data.top - 32, left: data.left - 32 })}
  onUnmount={({ data }, spring) => ({ top: spring(data.top + 32), left: spring(data.left + 32) })}
/>
```

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