{"bugs":{"url":"https://github.com/react-tools/react-move/issues"},"dist":{"shasum":"c4fee6e809e84a67752d916251057d417101e6bd","tarball":"https://registry.npmjs.org/react-move/-/react-move-4.0.0-beta.0.tgz","fileCount":19,"integrity":"sha512-Pr/Zr/TJtI2X4AQJQRB1ZTkLIDd7EQ3OkSUP/Hc2NJXsrLBsKM/HYHCed9JAR/o2NBWrhdLXzDsgzew7umWOmA==","signatures":[{"sig":"MEUCIQCOsAHJLnhaHZZTHBpWo49fC/gh92r7wkH5msUsSbtHVQIgAWAh4LVgtzV1KJxUN5qSgjCQjipZ3MWDSKMag7sCo2M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSoDzCRA9TVsSAnZWagAABkYP+gOcEH1p7NVJHUqNVQMh\n71RAbGP0YFRLRNsmsy4DY0aQWaNnCBLlmxCupgQgPKsby34RZBaxh3d9Kc25\nYgNCVVGXbmcNViR+ARjWmu9FKEApKrV6QB+rJrXhyOC1O8qOSOlCLhU4rSzx\nmCLT35JtC4uVQjloyZvK+hM4sVPUssxCkP9TT57XsyV7Trubu+rrndhJnIK0\nDFlP8L7UQ33qhNC2RcGkCuWTg4lWTiCLQfaTqTtighG4K6F73n9G0lSrhSjJ\nndnilR7CpN6U+nwN12rRJH+0KwdgXD+p6lVZYdqAgM7F9IES+6PdRRndCZuK\nXx0xYcOKw3SULvruD4ia+BI+glAflynjPK4BcWO2rvPsncjJcOrB3ks47+XY\nL3zgma25+0jBZicpGTEJuqF3rcP/VaooTAHD+6W/EmZ/JKWGK1GD6UWlJUB8\nMbPV8nOyZ6a6Yph2mssXTZuYTuWmSWmOYZrH1Q08P/hny4B7uZdneZoVGm3N\nCfTbcCdbHNjbDc9xPzc7xLrGQC8Av2010uwSo+OLBl67VJ5UXWELfh+tmJMF\ndcoweDEvhgd3omz1VJVhHcF+ZalqGtav26fSmawFu2VMaIV+O/UrbXOsb9MN\njTRqv0GT/wQUw79kCQoD4popxH/jn2va7ZSTbiE0uTqwYZ7g+jwIENp3Th5j\nCVDT\r\n=GqzD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","name":"react-move","types":"index.d.ts","module":"es/index.js","readme":"<div style=\"text-align:center;\">\n  <a href=\"https://github.com/react-tools/react-move\" target=\"\\_parent\"><img src=\"https://github.com/react-tools/media/raw/master/logo-react-move.png\" alt=\"React Table Logo\" style=\"width:450px;\"/></a>\n</div>\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## Features\n\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* Supports TypeScript\n\n## Installation\n\n```bash\n$ yarn add react-move\n# or\n$ npm install react-move\n```\n\n## React Move 4.0 is here!!!\n\nLots of exciting news and don't worry upgrading is a breeze and can be done in 5 minutes.  You will not have to make a single change to your existing components. 🎉 \n\n### 4.0 Highlights\n- React Move is now just **3.5kb (gzipped)! Almost 60% smaller.**\n- Application developers and package maintainers can now make much smaller bundles.\n- You can now use any interpolator you want which opens new creative doors for designers.\n- Tons of performance improvements. 🚀 \n- Much easier debugging of animations.\n\n### Upgrading to 4.0\n\nThis version of React Move breaks the hard dependency on d3-interpolate.  React Move now exports just two factory functions:\n- createNodeGroup(getInterpolator, displayName) => NodeGroup\n- createAnimate(getInterpolator, displayName) => Animate\n\nThe big change in this release is the `getInterpolator` function. This function opens up a lot of doors to be more efficient and creative with your animations. You can also debug your animations much more easily by console logging in `getInterpolator` to check if your animations are working as expected. \n\nFor starters, you'll get exactly the same component setup you have in react-move 2.x.x and 3.x.x by creating them locally like this:\n\nFirst install d3-interpolate locally:\n```\nnpm install d3-interpolate\n```\n\nThen in your app:\n```js\n// THIS IS HOW YOU UPGRADE TO 4.0\n\nimport { createNodeGroup, createAnimate } from 'react-move'\nimport { interpolate, interpolateTransformSvg } from 'd3-interpolate'\n\nfunction getInterpolator(begValue, endValue, attr, namespace) {\n  if (attr === 'transform') {\n    return interpolateTransformSvg(begValue, endValue)\n  }\n\n  return interpolate(begValue, endValue)\n}\n\n// YOUR NEW LOCAL <NodeGroup /> AND <Animate /> - EQUIVALENT TO 2.X.X AND 3.X.X\n\nexport const NodeGroup = createNodeGroup(getInterpolator, 'NodeGroupDisplayName') // displayName is optional\nexport const Animate = createAnimate(getInterpolator, 'AnimateDisplayName') // displayName is optional\n```\n\n### New `getInterpolator` function\n\nThe above `getInterpolator` function is how react-move has been hard wired for some time.  It's modeled after how [D3](https://d3js.org/) selects interpolators and is quite useful. If you're not concerned about bundle size then the above will give you a lot of flexibility.  The `interpolate` function exported from d3-interpolate is very clever.  It will interpolate numbers, colors and strings with numbers in them without you needing to worry about it.  \n\nThe `interpolate` function exported from d3-interpolate also includes a lot of code (e.g. d3-color) that may not be needed for your project. For example, if you are just interpolating numbers in your components you could replace all that code with just a simple a interpolation function.  React Move will apply easing functions (see [d3-ease](https://github.com/d3/d3-ease)) to your transitions to get a variety of effects.  A basic numeric interpolator would look like this:\n\n```js\nimport { createNodeGroup, createAnimate } from 'react-move'\n\nconst numeric = (beg, end) => {\n  const a = +beg\n  const b = +end - a\n  \n  return function(t) {\n    return a + b * t\n  } \n}\n\nfunction getInterpolator(begValue, endValue, attr, namespace) {\n  return numeric(begValue, endValue)\n}\n\nexport const NodeGroupNumeric = createNodeGroup(getInterpolator, 'NodeGroupDisplayName') // displayName is optional\nexport const AnimateNumeric = createAnimate(getInterpolator, 'AnimateDisplayName') // displayName is optional\n\n```\n\nYour `getInterpolator` function should avoid a lot of logic and computation.  It will get called at high frequency when transitions fire in your components.  You get the begin and end values and what the attribute name (string) is.  You will also get the namespace string (less common) if you are using them in your state.  **See the sections below on starting states and transitions for more on attrs and namespaces.**\n\nOf course you can create as many custom components as you want and organize them in a way that makes sense to you.  You can use any interpolation library or write your own. \n\n## Demos\n\n* [CodeSandbox - Animated Bars](https://codesandbox.io/s/w0ol90x9z5) ([@animateddata](https://github.com/animateddata))\n* [CodeSandbox - Collapsible Tree](https://codesandbox.io/s/ww0xkyqonk) ([@techniq](https://github.com/techniq))\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# Documentation\n\nThe docs below are for version **4.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\nThe API for `NodeGroup` and `Animate` have not changed in 4.0, but if you want to refer back:\n* [Version 2.x.x](https://github.com/react-tools/react-move/tree/v2.9.1)\n* [Version 3.x.x](https://github.com/react-tools/react-move/tree/v3.1.0)\n\n# Getting Started\n\nReact Move exports just two factory functions:\n- createNodeGroup => NodeGroup - If you have an **array of items** that enter, update and leave\n- createAnimate => Animate - If you have a **singe item** that enters, updates and leaves\n\nTo get some components to work with in your app you can use this code to create them with some good defaults:\n\n```\nnpm install react-move d3-interpolate\n```\n\nThen in your app:\n```js\nimport { createNodeGroup, createAnimate } from 'react-move'\nimport { interpolate, interpolateTransformSvg } from 'd3-interpolate'\n\nfunction getInterpolator(begValue, endValue, attr, namespace) {\n  if (attr === 'transform') {\n    return interpolateTransformSvg(begValue, endValue)\n  }\n\n  return interpolate(begValue, endValue)\n}\n\nexport const NodeGroup = createNodeGroup(getInterpolator, 'NodeGroupDisplayName') // displayName is optional\nexport const Animate = createAnimate(getInterpolator, 'AnimateDisplayName') // displayName is optional\n```\nThen just import them in other components in your app.\n\n## Starting state\n\nBefore looking at the components it might be good to look at starting state.  You are going to be asked to define starting states for each item in your `NodeGroup` and `Animate` components. This is a key concept and probably the most error prone for developers working with React Move.  The starting state for each item is always **an object with string or number leaves**.  The leaf keys are referred to as \"attrs\" as in \"attribute.\"  There are also \"namespaces\" which are a purely organizational concept.\n\nTwo rules to live by for starting states:\n- Don't use the strings \"timing\" or \"events\" as an attr or namespace.\n- There should never be an array anywhere in your object.\n\nExample starting state:\n```js\n// GOOD\n{\n  attr1: 100,\n  attr2: 200,\n  attr3: '#dadada'\n}\n\n// BAD\n{\n  attr1: [100], // NO ARRAYS\n  attr2: 200,\n  attr3: '#dadada'\n}\n```\n\nA more concrete example might be:\n```js\n{\n  opacity: 0.1,\n  x: 200,\n  y: 100,\n  color: '#dadada'\n}\n```\n\nYou can add \"namespaces\" to help organize your state:\n```js\n{\n  attr1: 100,\n  attr2: 200,\n  attr3: '#ddaabb',\n  namespace1: {\n    attr1: 100,\n    attr2: 200\n  }\n}\n```\nOr something like:\n```js\n{\n  namespace1: {\n    attr1: 100,\n    attr2: 200\n  },\n  namespace2: {\n    attr1: 100,\n    attr2: 200\n  }\n}\n```\nYou might use namespaces like so:\n```js\n{\n  inner: {\n    x: 100,\n    y: 150,\n    color: '#545454'\n  },\n  outer: {\n    x: 300,\n    y: 350,\n    color: '#3e3e3e'\n  }\n}\n```\n\n#### Starting state in NodeGroup\n\nIn `NodeGroup` you are working with an array of items and you pass a start prop (a function) that receives the data item and its index.  The start prop will be called when that data item (identified by its key) enters.  Note it could leave and come back and that prop will be called again.  Immediately after the starting state is set your enter transition (optional) is called allowing you to transform that state.\n\n```js\n<NodeGroup\n  data={data} // an array (required)\n  keyAccessor={item => item.name} // function to get the key of each object (required)\n  start={(item, index) => ({ // returns the starting state of node (required)\n    ...\n  })}\n>\n  {(nodes) => (\n    ...\n      {nodes.map(({ key, data, state }) => {\n        ...\n      })}\n    ...\n  )}\n</NodeGroup>\n```\n\n#### Starting state in Animate\n\nIn `Animate` you are animating a single item and pass a start prop that is an object or a function.  The start prop will be called when that the item enters.  Note it could leave and come back by toggling the show prop.  Immediately after the starting state is set your enter transition (optional) is called allowing you to transform that state.\n\n```js\n<Animate\n  start={{ // object or function\n    ...\n  }}\n>\n  {state => (\n    ...\n  )}\n</Animate>\n```\n\n## Transitioning state\n\nYou return an object or an array of config objects in your **enter**, **update** and **leave** props functions for both `NodeGroup` and `Animate`. Instead of simply returning the next state these objects describe how to transform the state. Each config object can specify its own duration, delay, easing and events independently.\n\nThere are two special keys you can use: **timing** and **events**. Both are optional.\nTiming and events are covered in more detail below.\n\nIf you aren't transitioning anything then it wouldn't make sense to be using NodeGroup.\nThat said, it's 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.  Ignores all timing values.\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\n\nExample config object:\n```js\n{\n  attr1: [200],\n  attr2: 300,\n  attr3: ['#dadada']\n  timing: { duration: 300, delay: 100 }\n}\n```\n\nUsing namespaces:\n```js\n{\n  attr1: [100],\n  attr3: '#ddaabb',\n  namespace1: {\n    attr1: [300],\n    attr2: 200\n  },\n  timing: { duration: 300, delay: 100 }\n}\n```\n\nTo have different timing for some keys use an array of config objects:\n```js\n[\n  {\n    attr1: [200, 500],\n    timing: { duration: 300, delay: 100 }\n  },\n  {\n    attr2: 300, // this item, not wrapped in an array, will be set immediately, so which object it's in doesn't matter\n    attr3: ['#dadada']\n    timing: { duration: 600 }\n  },\n]\n```\n\n### Example Transitions in NodeGroup\n\n```js\n<NodeGroup\n  data={this.state.data}\n  keyAccessor={(d) => d.name}\n\n  start={(data, index) => ({\n    opacity: 1e-6,\n    x: 1e-6,\n    fill: 'green',\n    width: scale.bandwidth(),\n  })}\n\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</NodeGroup>\n```\n\nUsing an array of config objects:\n```js\nimport { easeQuadInOut } from 'd3-ease';\n\n...\n\n<NodeGroup\n  data={this.state.data}\n  keyAccessor={(d) => d.name}\n\n  start={(data, index) => ({\n    opacity: 1e-6,\n    x: 1e-6,\n    fill: 'green',\n    width: scale.bandwidth(),\n  })}\n\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</NodeGroup>\n```\n\n## Timing\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## Events\n\nYou can add events on your config objects.  You can pass a function that will run when the transition starts, is interrupted (an update to the data occurs) or ends.\n\nUsing Events:\n```js\n{\n  attr1: [100],\n  attr3: '#ddaabb',\n  namespace1: {\n    attr1: [300],\n    attr2: 200\n  },\n  timing: { duration: 300, delay: 100 },\n  events: {\n    start: () => {\n      ..do stuff - use an arrow function to keep the context of the outer component\n    },\n    interrupt: () => {\n      ..do stuff - use an arrow function to keep the context of the outer component\n    },\n    end: () => {\n      ..do stuff - use an arrow function to keep the context of the outer component\n    },\n  }\n}\n```\n\n\n## < NodeGroup />\n\n### Component Props\n\n| Name                                               | Type     | Default  | Description                                                                                                                                                                              |\n| :------------------------------------------------- | :------- | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| <span style=\"color: #31a148\">data \\*</span>        | 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| <span style=\"color: #31a148\">keyAccessor \\*</span> | 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| <span style=\"color: #31a148\">start \\*</span>       | 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| <span style=\"color: #31a148\">children \\*</span>    | 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## < Animate />\n\n### Component Props\n\n| Name | Type | Default | Description |\n|:-----|:-----|:-----|:-----|\n| show | bool | true |  Boolean value that determines if the child should be rendered or not. |\n| <span style=\"color: #31a148\">start *</span> | union:<br>&nbsp;func<br>&nbsp;object<br> |  |  An object or function that returns an obejct to be used as the starting state. |\n| enter | union:<br>&nbsp;func<br>&nbsp;array<br>&nbsp;object<br> |  |  An object, array of objects, or function that returns an object or array of objects describing how the state should transform on enter. |\n| update | union:<br>&nbsp;func<br>&nbsp;array<br>&nbsp;object<br> |  |  An object, array of objects, or function that returns an object or array of objects describing how the state should transform on update. ***Note:*** although not required, in most cases it make sense to specify an update prop to handle interrupted enter and leave transitions. |\n| leave | union:<br>&nbsp;func<br>&nbsp;array<br>&nbsp;object<br> |  |  An object, array of objects, or function that returns an object or array of objects describing how the state should transform on leave. |\n| <span style=\"color: #31a148\">children *</span> | function |  |  A function that renders the node.  The function is passed the data and state. |\n\n* required props\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 is designed to plugin interpolation for 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 use 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 tween functions. It's all springs in react-motion.\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":{"prop-types":"^15.6.2","kapellmeister":"^2.0.0","@babel/runtime":"^7.3.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^16.3.0"},"_npmOperationalInternal":{"tmp":"tmp/react-move_4.0.0-beta.0_1548386547305_0.004258149724972959","host":"s3://npm-registry-packages"},"_id":"react-move@4.0.0-beta.0","version":"4.0.0-beta.0"}