Registry / web-framework / react-flip-toolkit

react-flip-toolkit

library7.2.4jsnpmunverified

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).

web-framework

npm install react-flip-toolkit

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-FLIP-TOOLKIT

react-flip-toolkit

web-frameworkjavascriptv7.2.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Flipper

✓ import { Flipper } from 'react-flip-toolkit'

✗ const Flipper = require('react-flip-toolkit').Flipper

ESM-only since v7.2.4 (defaults to ESM exports). Use import syntax. For CJS, use dynamic import or check package exports.

Flipped

✓ import { Flipped } from 'react-flip-toolkit'

✗ import * as Flip from 'react-flip-toolkit'

Named export, not default. Avoid star imports.

spring

✓ import { spring } from 'react-flip-toolkit'

✗ import spring from 'react-flip-toolkit'

Named export, not default. Has been available since v7.

Flipper (type)

✓ import type { Flipper } from 'react-flip-toolkit'

TypeScript users: use import type for type-only imports, but the library ships types so you can also use regular import.

Shows a basic list shuffle animation using Flipper and Flipped components. The flipKey prop triggers animation when items change order.

import React, { useState } from 'react'; import { Flipper, Flipped } from 'react-flip-toolkit'; function List() { const [items, setItems] = useState(['a', 'b', 'c', 'd', 'e']); const shuffle = () => setItems(prev => { const arr = [...prev]; for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; }); return ( <div> <button onClick={shuffle}>Shuffle</button> <Flipper flipKey={items.join('')}> <ul> {items.map(item => ( <Flipped key={item} flipId={item}> <li>{item}</li> </Flipped> ))} </ul> </Flipper> </div> ); } export default List;

Debug

Known issues

breakingv7.0.0 changed the internal architecture and separated flip-toolkit package; react-flip-toolkit now depends on flip-toolkit.

fix

Upgrade to v7+ and ensure you import from 'react-flip-toolkit' directly.

affects: <7.0.0

breakingv7.2.0 introduced modern exports that broke type resolutions. v7.2.4 removed modern exports, defaulting to ESM.

fix

Upgrade to v7.2.4 or later. If you were using modern exports, switch to ESM imports.

affects: 7.2.0 - 7.2.3

deprecatedThe old default export 'ReactFlipToolkit' is deprecated. Use named exports instead.

fix

Replace default import with named imports: import { Flipper, Flipped } from 'react-flip-toolkit'.

affects: >=7.0.0

gotchaFlipper's flipKey prop must change for animations to trigger. If it doesn't change, no FLIP animation will occur.

fix

Ensure the flipKey prop is updated (e.g., a new string or number) when the layout changes.

affects: all

gotchaFlipped components require a unique flipId prop across all Flipped children. Duplicate flipIds may cause unpredictable behavior.

fix

Use unique flipId values, typically the same as the React key prop.

affects: all

gotchaAnimation of elements with zero height (e.g., display: none) may not work correctly in some versions. Fixed in v7.0.13.

fix

Upgrade to v7.0.13 or later.

affects: <7.0.13

gotchaThe onComplete callback is not called when animation is cancelled (e.g., component unmounts). Fixed in v7.0.6.

fix

Upgrade to v7.0.6 or later.

affects: <7.0.6

Errors

Common errors & fixes

Module not found: Can't resolve 'react-flip-toolkit'

Missing installation or wrong import path.

fix

Run 'npm install react-flip-toolkit' or 'yarn add react-flip-toolkit'. Ensure import is from 'react-flip-toolkit'.

Attempted import error: 'Flipper' is not exported from 'react-flip-toolkit' (imported as Flipper)

Using incorrect import syntax or out-of-date version.

fix

Use named import: import { Flipper } from 'react-flip-toolkit'. Ensure package version is ^7.0.0.

TypeError: Cannot read properties of undefined (reading 'current')

Flipped component used without a prop for ref; or the element is not a DOM node.

fix

Wrap the element inside Flipped with a forwardRef component or directly use a DOM element. If using a functional component, use React.forwardRef.

'flipId' of '0' is being ignored

A falsy value (like 0) was used as flipId, which got ignored in older versions.

fix

Upgrade to v7.0.13 or later, or use a non-zero string/number as flipId.

Upgrade

Version history

7.2.4latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React components

react-domrequiredPeer dependency for DOM rendering

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/aholachek/react-flip-toolkit ↗

packagehttps://www.npmjs.com/package/react-flip-toolkit ↗