{"bugs":{"url":"https://github.com/react-tools/react-move/issues"},"dist":{"shasum":"ebcccfc2e4b0afd75bc848e72ef9a2386003e780","tarball":"https://registry.npmjs.org/react-move/-/react-move-2.9.0-beta.0.tgz","fileCount":37,"integrity":"sha512-tJNh7vbqzIDHFVAC+lx/OXfUxepr0u/mb9j0JVbctOC3wO8bVHZ+3yloF47CGC2+ITKmABpeOo0gf7hRgRF+cA==","signatures":[{"sig":"MEYCIQDXclfyITUj9+AiiDRHeaj0RsXmiDQb39yyOoQrCE/59QIhAInoZQ79g6p868hBr/lTMi4p4ZU3mRdwTe0FtjyZCryY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQW8CCRA9TVsSAnZWagAAyH4P/RT0xdwuRxWBAXN7KBox\nsJRrh9OwsaQpPM5o3eqyT7l9kkC2w+gFu+2oyYHcMkBfJjUqJWBMCixrbu5Q\nVR/YZmyGopjTV/yLixqjVDDmOvFV5r7bfcqOCRMKy2nkb1GisYDdXAb1lgF2\n4j+oF0vcd6nadFEEPSPxDOXCRnkVMsjtjQUeH0jCJRQJ1UekUf3qAdqcwidu\nPovhDSdWaaOpeeYbHgiPqg4t590cBFWbaGXnM2lQt5bs9x2SH3yxaa92/fjQ\nB95AecmmyKRGsDgZkLUv56eA9zkuH7JvBQ7k4DRFLFdca7ZzN+5CRtIO9BBJ\nJCAF/18HJ+8szNRgkZZMS6ny8HFJhKBvKBUWk1Qm40mZvbO6HY3+QYoGHFp9\n5UeF3bLSbNrxl9ZM2x5/tV786ZQ2F62An9jxO9rMrZZ6aDeKOLi4bK4lj4Oa\nXX5DO6V043YRtMvQZKk9JfuqqrA4RXt8m2oGafJFZiwIuUlhxnCMSxaD3Beq\ns3whN8+CmeAjFcjoqzfVsVO5vOjNZUk0wCJrjdilUJTfQ0YBeYzzUqZ/ofr8\n8xMZ4hDg0Y5lMrWyvU1hl4Rd4z6zDmP0PC/JlrUtY5x01o4e1sCehVwshucY\nAS89ZpZJ9lVvuWMKu+i2zLQssGBM9QOOD+qUBI5knjT/UnDtnZMKysXe0YLw\nj6g2\r\n=kufq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","name":"react-move","types":"index.d.ts","module":"es/index.js","readme":"
\n \"React\n
\n\n# React-Move\n\nBeautiful, data-driven animations for React.\n\n[![Build Status](https://travis-ci.org/react-tools/react-move.svg?branch=master)](https://travis-ci.org/react-tools/react-move)\n[![npm version](https://img.shields.io/npm/v/react-move.svg)](https://www.npmjs.com/package/react-move)\n[![npm downloads](https://img.shields.io/npm/dm/react-move.svg)](https://www.npmjs.com/package/react-move)\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/react-tools/react-move/blob/master/LICENSE)\n![gzip size](http://img.badgesize.io/https://npmcdn.com/react-move/dist/react-move.min.js?compression=gzip)\n[![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/react-move)\n\n### Go to [live examples, code and docs](https://react-move.js.org)!\n\n## Features\n\n* Built-in support for interpolating:\n * Strings\n * Numbers\n * Colors\n * SVG paths\n * SVG transforms\n* Animate HTML, SVG & React-Native\n* Fine-grained control of delay, duration and easing\n* Animation lifecycle events: start, interrupt, end\n* Custom tweening functions\n* Awesome documentation and lots of examples\n* Supported in React, React-Native & React-VR\n* Supports TypeScript\n\n## Demos\n\n* [CodeSandbox - Draggable List](https://codesandbox.io/s/j2povnz8ly)\n* [CodeSandbox - Circle Inferno](https://codesandbox.io/s/n033m6nw00)\n* [CodeSandbox - Animated Mount/Unmount](https://codesandbox.io/s/9z04rpypny)\n* [Examples](https://react-move.js.org)\n\n## React-Move vs React-Motion\n\n* React-move allows you to define your animations using durations, delays and ease functions.\n In react-motion you use spring configurations to define your animations.\n\n* React-move has built-in support for interpolating strings, numbers, colors, SVG paths and SVG transforms.\n With react-motion you can only interpolate numbers so you have to do a bit more work or include another library to work with colors, paths, etc.\n\n* In react-move you can define different animations for entering, updating and leaving with the ability to specify delay, duration and ease on each individual key.\n React-motion allows you to define a spring configuration for each key in the \"style\" object.\n\n* React-move has lifecycle events on its transitions.\n You can pass a function to be called on transition start, interrupt or end.\n React-motion has an \"onRest\" prop that fires a callback when the animation stops (just the `Motion` component not `TransitionMotion` or `StaggeredMotion`).\n\n* React-move also allows you to pass your own custom interpolators. It's all springs in react-motion.\n\n## Questions? Ideas? Chat with us!\n\nSign up for the [React-Tools Spectrum Community](https://spectrum.chat/react-move)!\n\n## Installation\n\n```bash\n$ yarn add react-move\n# or\n$ npm install react-move\n```\n\n# Documentation\n\nThe docs below are for version **2.x.x** of React-Move.\n\nOlder versions:\n\n* [Version 1.x.x](https://github.com/react-tools/react-move/tree/v1.6.1)\n\n## < NodeGroup />\n\nThe NodeGroup component allows you to create complex animated transitions. You pass it an array of objects and a key accessor function and it will run your enter, update and leave transitions as the data updates.\nThe idea is similar to transition components like [react-transition-group](https://github.com/reactjs/react-transition-group) or [react-motion's TransitionMotion](https://github.com/chenglou/react-motion) but you use objects to express how you want your state to transition.\n\nNot only can you can have independent duration, delay and easing for entering, updating and leaving but each individual key in your state can define its own timing!\n\n### Component Props\n\n| Name | Type | Default | Description |\n| :------------------------------------------------- | :------- | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| data \\* | Array | | An array of data objects. The data prop is treated as immutable so the nodes will only update if prev.data !== next.data. |\n| keyAccessor \\* | function | | Function that returns a string key given a data object and its index. Used to track which nodes are entering, updating and leaving. |\n| start \\* | function | | A function that returns the starting state. The function is passed the data and index and must return an object. |\n| enter | function | () => {} | A function that **returns an object or array of objects** describing how the state should transform on enter. The function is passed the data and index. |\n| update | function | () => {} | A function that **returns an object or array of objects** describing how the state should transform on update. The function is passed the data and index. |\n| leave | function | () => {} | A function that **returns an object or array of objects** describing how the state should transform on leave. The function is passed the data and index. |\n| children \\* | function | | A function that renders the nodes. It should accept an array of nodes as its only argument. Each node is an object with the key, data, state and a type of 'ENTER', 'UPDATE' or 'LEAVE'. |\n\n* required props\n\n### Usage\n\nGo to [live examples, code and docs](https://react-move.js.org)!\n\nA typical usage of NodeGroup looks like this...\n\n```js\n d.name} // function to get the key of each object (required)\n\n start={(data, index) => ({ // returns the starting state of node (required)\n ...\n })}\n\n enter={(data, index) => ({ // how to transform node state on enter - runs immediately after start (optional)\n ...\n })}\n\n update={(data, index) => ({ // how to transform node state on update - runs each time data updates and key remains (optional)\n ...\n })}\n\n leave={(data, index) => ({ // how to transform node state on leave - run when data updates and key is gone (optional)\n ...\n })}\n>\n {(nodes) => ( // the only child of NodeGroup should be a function to render the nodes (required)\n ...\n {nodes.map(({ key, data, state }) => {\n ...\n })}\n ...\n )}\n\n```\n\n### Transitions\n\nGo to [live examples, code and docs](https://react-move.js.org)!\n\n```js\n d.name}\n\n // start - starting state of the node. Just return an object.\n start={(data, index) => ({\n opacity: 1e-6,\n x: 1e-6,\n fill: 'green',\n width: scale.bandwidth(),\n })}\n\n // enter - return an object or array of objects describing how to transform the state.\n enter={(data, index) => ({\n opacity: [0.5], // transition opacity on enter\n x: [scale(data.name)], // transition x on on enter\n timing: { duration: 1500 }, // timing for transitions\n })}\n\n update={(data) => ({\n ...\n })}\n\n leave={() => ({\n ...\n })}\n>\n {(nodes) => (\n ...\n )}\n\n```\n\nYou return an object or an array of objects in your **enter**, **update** and **leave** functions.\nInstead of simply returning the next state these objects describe how to transform the state.\nThis is far more powerful than just returning a state object. By approaching it this way, you can describe really complex transformations and handle interrupts easily.\n\nIf you're familiar with D3, this approach mimics selection/transition behavior. In D3 your are really describing how the state should look on enter, update and exit and how to get there: set the value immediately or transition to it.\nD3 deals with the fact that transitions might be in-flight or the key is already at that value in the background without you having to worry about that.\nThe NodeGroup takes the same approach but it's done in idiomatic React.\n\nEach object returned from your enter, update and leave functions can specify its own duration, delay, easing and events independently.\nTo support that, inside your object there are two special keys you can use: **timing** and **events**. Both are optional.\nTiming and events are covered in more detail below.\nThe rest of the keys in each object are assumed to be keys in your state.\n\nIf you aren't transitioning anything then it wouldn't make sense to be using NodeGroup.\nThat said, like in D3, it's also convenient to be able to set a key to value when a node enters, updates or leaves without transitioning.\nTo support this you can return four different types of values to specify how you want to transform the state.\n\n* `string or number`: Set the key to the value immediately with no transition.\n\n* `array [value]`: Transition from the key's current value to the specified value. Value is a string or number.\n\n* `array [value, value]`: Transition from the first value to the second value. Each value is a string or number.\n\n* `function`: Function will be used as a custom tween function.\n\nIn all cases above a \"string\" can be a color, path, transform (the key must be called \"transform\" see below), etc and it will be interpolated using the correct interpolator.\nSee the interpolators section below.\n\n## Timing\n\nGo to [live examples, code and docs](https://react-move.js.org)!\n\nIf there's no timing key in your object you'll get the timing defaults.\nYou can specify just the things you want to override on your timing key.\n\nHere's the timing defaults...\n\n```js\nconst defaultTiming = {\n delay: 0,\n duration: 250,\n ease: easeLinear\n};\n```\n\nFor the ease key, just provide the function. You can use any easing function, like those from d3-ease...\n\n[List of ease functions exported from d3-ease](https://github.com/d3/d3-ease/blob/master/index.js)\n\n## Passing an array of objects\n\nGo to [live examples, code and docs](https://react-move.js.org)!\n\nEach object can define its own timing and it will be applied to any transitions in the object.\n\n```js\nimport { easeQuadInOut } from 'd3-ease';\n\n...\n\n d.name}\n\n // start - starting state of the node. Just return an object.\n start={(data, index) => ({\n opacity: 1e-6,\n x: 1e-6,\n fill: 'green',\n width: scale.bandwidth(),\n })}\n\n // enter - return an object or array of objects describing how to transform the state.\n enter={(data, index) => ([ // An array\n {\n opacity: [0.5], // transition opacity on enter\n timing: { duration: 1000 }, // timing for transition\n },\n {\n x: [scale(data.name)], // transition x on on enter\n timing: { delay: 750, duration: 1500, ease: easeQuadInOut }, // timing for transition\n },\n ])}\n\n update={(data) => ({\n ...\n })}\n\n leave={() => ({\n ...\n })}\n>\n {(nodes) => (\n ...\n )}\n\n```\n\n## Contributing\n\nWe love contributions from the community! Read the [contributing info here](https://github.com/react-tools/react-move/blob/master/CONTRIBUTING.md).\n\n#### Run the repo locally\n\n* Fork this repo\n* `npm install`\n* `cd docs`\n* `npm install`\n* `npm start`\n\n#### Scripts\n\nRun these from the root of the repo\n\n* `npm run lint` Lints all files in src and docs\n* `npm run test` Runs the test suite locally\n* `npm run test:coverage` Get a coverage report in the console\n* `npm run test:coverage:html` Get an HTML coverage report in coverage folder\n\nGo to [live examples, code and docs](https://react-move.js.org)!\n","license":"MIT","_npmUser":{"name":"sghall","email":"hall.steven.g@gmail.com"},"homepage":"https://github.com/react-tools/react-move#readme","keywords":["react-move","resonance","d3","svg","react","charts","graphs","animation","transitions","interpolation"],"repository":{"url":"git+https://github.com/react-tools/react-move.git","type":"git"},"_npmVersion":"6.4.1","description":"Beautiful, data-driven animations for React.","directories":{},"jsnext:main":"es/index.js","maintainers":[{"name":"sghall","email":"hall.steven.g@gmail.com"},{"name":"tannerlinsley","email":"tannerlinsley@gmail.com"}],"_nodeVersion":"9.8.0","contributors":[{"url":"http://www.delimited.io","name":"Steven Hall","email":"hall.steven.g@gmail.com"},{"url":"http://nozzle.io","name":"Tanner Linsley","email":"tannerlinsley@gmail.com"}],"dependencies":{"d3-timer":"^1.0.9","prop-types":"^15.6.2","@babel/runtime":"^7.2.0","d3-interpolate":"^1.3.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/react-move_2.9.0-beta.0_1547792129588_0.45807620440003194","host":"s3://npm-registry-packages"},"_id":"react-move@2.9.0-beta.0","version":"2.9.0-beta.0"}