{"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).","language":"javascript","status":"active","last_verified":"Sat Apr 25","install":{"commands":["npm install react-flip-toolkit"],"cli":null},"imports":["import { Flipper } from 'react-flip-toolkit'","import { Flipped } from 'react-flip-toolkit'","import { spring } from 'react-flip-toolkit'","import type { Flipper } from 'react-flip-toolkit'"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}