{"id":18709,"library":"react-flip-toolkit","title":"react-flip-toolkit","description":"A configurable FLIP animation library for React, providing smooth and performant transitions for element position, scale, and opacity changes. Current stable version 7.2.4, released under MIT license, with a release cadence of minor updates quarterly and patches as needed. Key differentiators: supports spring-based animations, stagger effects, nested scale transforms without warping children, and works with frameworks other than React via the flip-toolkit package. Ships TypeScript types. Minimal bundle size (~5KB gzipped).","status":"active","version":"7.2.4","language":"javascript","source_language":"en","source_url":"https://github.com/aholachek/react-flip-toolkit","tags":["javascript","react-component","FLIP","transition","animation","typescript"],"install":[{"cmd":"npm install react-flip-toolkit","lang":"bash","label":"npm"},{"cmd":"yarn add react-flip-toolkit","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-flip-toolkit","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React components","package":"react","optional":false},{"reason":"Peer dependency for DOM rendering","package":"react-dom","optional":false}],"imports":[{"note":"ESM-only since v7.2.4 (defaults to ESM exports). Use import syntax. For CJS, use dynamic import or check package exports.","wrong":"const Flipper = require('react-flip-toolkit').Flipper","symbol":"Flipper","correct":"import { Flipper } from 'react-flip-toolkit'"},{"note":"Named export, not default. Avoid star imports.","wrong":"import * as Flip from 'react-flip-toolkit'","symbol":"Flipped","correct":"import { Flipped } from 'react-flip-toolkit'"},{"note":"Named export, not default. Has been available since v7.","wrong":"import spring from 'react-flip-toolkit'","symbol":"spring","correct":"import { spring } from 'react-flip-toolkit'"},{"note":"TypeScript users: use import type for type-only imports, but the library ships types so you can also use regular import.","wrong":"","symbol":"Flipper (type)","correct":"import type { Flipper } from 'react-flip-toolkit'"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport { Flipper, Flipped } from 'react-flip-toolkit';\n\nfunction List() {\n  const [items, setItems] = useState(['a', 'b', 'c', 'd', 'e']);\n  const shuffle = () => setItems(prev => {\n    const arr = [...prev];\n    for (let i = arr.length - 1; i > 0; i--) {\n      const j = Math.floor(Math.random() * (i + 1));\n      [arr[i], arr[j]] = [arr[j], arr[i]];\n    }\n    return arr;\n  });\n  return (\n    <div>\n      <button onClick={shuffle}>Shuffle</button>\n      <Flipper flipKey={items.join('')}>\n        <ul>\n          {items.map(item => (\n            <Flipped key={item} flipId={item}>\n              <li>{item}</li>\n            </Flipped>\n          ))}\n        </ul>\n      </Flipper>\n    </div>\n  );\n}\n\nexport default List;","lang":"typescript","description":"Shows a basic list shuffle animation using Flipper and Flipped components. The flipKey prop triggers animation when items change order."},"warnings":[{"fix":"Upgrade to v7+ and ensure you import from 'react-flip-toolkit' directly.","message":"v7.0.0 changed the internal architecture and separated flip-toolkit package; react-flip-toolkit now depends on flip-toolkit.","severity":"breaking","affected_versions":"<7.0.0"},{"fix":"Upgrade to v7.2.4 or later. If you were using modern exports, switch to ESM imports.","message":"v7.2.0 introduced modern exports that broke type resolutions. v7.2.4 removed modern exports, defaulting to ESM.","severity":"breaking","affected_versions":"7.2.0 - 7.2.3"},{"fix":"Replace default import with named imports: import { Flipper, Flipped } from 'react-flip-toolkit'.","message":"The old default export 'ReactFlipToolkit' is deprecated. Use named exports instead.","severity":"deprecated","affected_versions":">=7.0.0"},{"fix":"Ensure the flipKey prop is updated (e.g., a new string or number) when the layout changes.","message":"Flipper's flipKey prop must change for animations to trigger. If it doesn't change, no FLIP animation will occur.","severity":"gotcha","affected_versions":"all"},{"fix":"Use unique flipId values, typically the same as the React key prop.","message":"Flipped components require a unique flipId prop across all Flipped children. Duplicate flipIds may cause unpredictable behavior.","severity":"gotcha","affected_versions":"all"},{"fix":"Upgrade to v7.0.13 or later.","message":"Animation of elements with zero height (e.g., display: none) may not work correctly in some versions. Fixed in v7.0.13.","severity":"gotcha","affected_versions":"<7.0.13"},{"fix":"Upgrade to v7.0.6 or later.","message":"The onComplete callback is not called when animation is cancelled (e.g., component unmounts). Fixed in v7.0.6.","severity":"gotcha","affected_versions":"<7.0.6"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install react-flip-toolkit' or 'yarn add react-flip-toolkit'. Ensure import is from 'react-flip-toolkit'.","cause":"Missing installation or wrong import path.","error":"Module not found: Can't resolve 'react-flip-toolkit'"},{"fix":"Use named import: import { Flipper } from 'react-flip-toolkit'. Ensure package version is ^7.0.0.","cause":"Using incorrect import syntax or out-of-date version.","error":"Attempted import error: 'Flipper' is not exported from 'react-flip-toolkit' (imported as Flipper)"},{"fix":"Wrap the element inside Flipped with a forwardRef component or directly use a DOM element. If using a functional component, use React.forwardRef.","cause":"Flipped component used without a prop for ref; or the element is not a DOM node.","error":"TypeError: Cannot read properties of undefined (reading 'current')"},{"fix":"Upgrade to v7.0.13 or later, or use a non-zero string/number as flipId.","cause":"A falsy value (like 0) was used as flipId, which got ignored in older versions.","error":"'flipId' of '0' is being ignored","affected_versions":"<7.0.13"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}