{"library":"react-move","title":"React-Move Animation Library","description":"React-Move is a highly performant, data-driven animation library for React applications, supporting animations for HTML, SVG, and React-Native elements. Currently stable at version 6.5.0, it targets React 16.3 and above, focusing on a minimal bundle size (3.5kb gzipped). The library provides fine-grained control over animation properties like delay, duration, and easing, along with lifecycle events for 'start', 'interrupt', and 'end'. A key differentiator is its flexible approach to interpolation; while it handles numeric interpolation by default, it allows integration with libraries like `d3-interpolate` for complex types such as colors, paths, and SVG transforms. Major versions often align with React's lifecycle method changes, with a commitment to API stability between major releases. It ships with full TypeScript support, making it well-suited for modern web development. While v5.x provides backward compatibility for older React versions, v6.x is recommended for React 16.3+ to leverage a smaller bundle size by omitting the `react-lifecycles-compat` polyfill.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-move"],"cli":null},"imports":["import { NodeGroup } from 'react-move'","import { Animate } from 'react-move'","import type { NodeGroupProps } from 'react-move'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport { NodeGroup } from 'react-move';\nimport { interpolate, interpolateTransformSvg } from 'd3-interpolate';\n\ninterface DataItem {\n  name: string;\n  x: number;\n  y: number;\n  transform: string;\n}\n\nconst AnimatedNodes: React.FC = () => {\n  const [data, setData] = useState<DataItem[]>([\n    { name: 'a', x: 0, y: 0, transform: 'translate(0,0) scale(1)' },\n    { name: 'b', x: 50, y: 50, transform: 'translate(50,50) scale(1)' },\n  ]);\n\n  const updateData = () => {\n    setData(prevData => prevData.map(d => ({\n      ...d,\n      x: Math.random() * 180 + 10,\n      y: Math.random() * 180 + 10,\n      transform: `translate(${Math.random() * 100},${Math.random() * 100}) scale(${0.5 + Math.random() * 1.5})`\n    })));\n  };\n\n  return (\n    <div>\n      <button onClick={updateData} style={{ marginBottom: '10px' }}>Animate Nodes</button>\n      <svg width=\"200\" height=\"200\" style={{ border: '1px solid #eee' }}>\n        <NodeGroup\n          data={data}\n          keyAccessor={(d: DataItem) => d.name}\n          start={(data: DataItem) => ({\n            x: data.x,\n            y: data.y,\n            transform: data.transform,\n            opacity: 0,\n          })}\n          enter={(data: DataItem) => ([\n            {\n              opacity: [1],\n              timing: { duration: 500 },\n            },\n            {\n              x: [data.x],\n              y: [data.y],\n              transform: [data.transform],\n              timing: { duration: 500 },\n            }\n          ])}\n          update={(data: DataItem) => ({\n            x: [data.x],\n            y: [data.y],\n            transform: [data.transform],\n            opacity: [1],\n            timing: { duration: 500, ease: 'easeCubicOut' },\n          })}\n          leave={() => ([\n            {\n              opacity: [0],\n              timing: { duration: 300 },\n            },\n            {\n              x: [0],\n              y: [0],\n              timing: { duration: 300 },\n            }\n          ])}\n          interpolation={(begValue, endValue, attr) => {\n            if (attr === 'transform') {\n              return interpolateTransformSvg(begValue, endValue);\n            }\n            return interpolate(begValue, endValue);\n          }}\n        >\n          {nodes => (\n            <g>\n              {nodes.map(({ key, data: item, state }) => (\n                <circle\n                  key={key}\n                  cx={state.x}\n                  cy={state.y}\n                  r={10}\n                  fill=\"steelblue\"\n                  opacity={state.opacity}\n                  transform={state.transform}\n                />\n              ))}\n            </g>\n          )}\n        </NodeGroup>\n      </svg>\n    </div>\n  );\n};\n\nexport default AnimatedNodes;","lang":"typescript","description":"Demonstrates animating a list of SVG circle nodes using `NodeGroup`. It includes dynamic data updates, entry/update/exit animations, and utilizes `d3-interpolate` for advanced SVG transform interpolation.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}