react-spring-flip
v2.1.0
Published
React library for doing FLIP animations using react-spring
Downloads
42
Readme
react-spring-flip
Introduction
The react-spring-flip
package provides easy FLIP animations in React using the react-spring
library. So, if you're already using react-spring, then this is a very lite addition to your bundle.
TODO: Determine incremental size of library when already using react-spring
Forkable Examples
Simple Example: An Expanding Div
Fork this example on Code Sandbox
import React, { useState } from 'react'
import { Flip, Flipper } from 'react-spring-flip';
const AnimatedSquare = () => {
const [fullScreen, setFullScreen] = useState(false)
const toggleFullScreen = () => setFullScreen(prevState => !prevState)
return (
<Flipper flipKey={fullScreen}>
<Flip
flipId="square"
className={fullScreen ? 'full-screen-square' : 'square'}
onClick={toggleFullScreen}
/>
</Flipper>
)
}
Simple Example: Two Divs
Fork this example on Code Sandbox
import React, { useState } from 'react'
import { Flipper, Flip } from 'react-flip-toolkit'
const Square = ({ toggleFullScreen }) => (
<Flip flipId="square" className="square" onClick={toggleFullScreen} />
)
const FullScreenSquare = ({ toggleFullScreen }) => (
<Flip flipId="square" className="full-screen-square" onClick={toggleFullScreen} />
)
const AnimatedSquare = () => {
const [fullScreen, setFullScreen] = useState(false)
const toggleFullScreen = () => setFullScreen(prevState => !prevState)
return (
<Flipper flipKey={fullScreen}>
{fullScreen ? (
<FullScreenSquare toggleFullScreen={toggleFullScreen} />
) : (
<Square toggleFullScreen={toggleFullScreen} />
)}
</Flipper>
)
}
Simple Example: List Shuffle
Fork this example on Code Sandbox
import React, { useState } from 'react'
import { Flip, Flipper } from 'react-spring-flip';
import shuffle from 'lodash/shuffle';
const ListShuffler = () => {
const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
const shuffleList = () => setData(shuffle(data))
return (
<Flipper flipKey={data.join('')}>
<button onClick={shuffleList}> shuffle</button>
<ul className="list">
{data.map(d => (
<Flip el="li" key={d} flipId={d}>
{d}
</Flip>
))}
</ul>
</Flipper>
)
}
Quick Start
Inside your React project directory, run the following:
yarn add react-spring-flip
Or with npm:
npm install react-spring-flip
The Components
Flipper
The parent wrapper component that contains all the elements to be animated. You'll often need only one of these per page, but sometimes it will be more convenient to have multiple Flipper
regions of your page concerned with different transitions.
<Flipper flipKey={someKeyThatChanges}>{/* children */}</Flipper>
Basic Props
| prop | default | type | details |
|--- |:--- |:----|:---|
| flipKey (required) | - | string
, number
, bool
| Changing this tells react-flip-toolkit
to transition child elements wrapped in Flip
components. |
| children (required) | - | node
| One or more element children |
** TODO: Enable custom "spring" passed as prop**
Flip
Wraps an element that should be animated.
E.g. in one component you can have
<Flip flipId="coolDiv">
<div className="small" />
</Flip>
and in another component somewhere else you can have
<Flip flipId="coolDiv">
<div className="big" />
</Flip>
and they will be tweened by react-spring-flip
.
| prop | default | type | details |
| :-------- | :--- | :---- | :--- |
| flipId (required unless inverseFlipId is provided) | - | string
| Use this to tell react-spring-flip
how elements should be matched across renders so they can be animated. |
| el | 'div' | string
| the HTML element to render in place of the Flip
component |