Skip to content
▶️ Playful: A simple transition library for React (and routers!)
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
.vscode
src
stories
.babelrc
.eslintrc
.gitignore
.prettierignore
.prettierrc.yml
LICENSE
README.md
netlify.toml
package-lock.json
package.json

README.md

▶️ Playful

A simple transition library for React (and routers!)

Table of Contents

Installation

npm install --save playful

Usage

import {withTransition} from 'playful'

// Create your components as you normally would
const MyComponent = () => <div>My Content</div>

// Define the effect you'd like your component to animate with when it is
// mounted and unmounted. Technically, you don't need to do this.
// The library has some nice smart defaults.
const playOptions = {
  effect: 'fadeAndPop',
  duration: 600,
  direction: 'up',
}

// Create the enhanced component using withTransition along with your
// options and component.
const PlayfulComponent = withTransition(playOptions)(MyComponent)

// Render it out! ✨
const App = () => {
  return (
    <div className="App">
      <PlayfulComponent />
    </div>
  )
}

Effects

Playful supports the following transition effects:

  • fade
  • fadeAndPop
  • fadeAndSlide
  • pop
  • scale
  • slide
  • swipe
  • zoom

Direction

The following directions can be applied to directonal moving effects:

  • up
  • down
  • left
  • right

The default direction is right.

Example

Check out the Storybook example!

You can’t perform that action at this time.