react-spring-flip v2.1.0

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

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.