https://github.com/itsjonq/playful
▶️ Playful: A simple transition library for React (and routers!)
https://github.com/itsjonq/playful
Last synced: 7 months ago
JSON representation
▶️ Playful: A simple transition library for React (and routers!)
- Host: GitHub
- URL: https://github.com/itsjonq/playful
- Owner: ItsJonQ
- License: mit
- Created: 2019-02-09T18:42:53.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-10T04:18:22.000Z (over 7 years ago)
- Last Synced: 2024-04-24T14:58:34.054Z (over 2 years ago)
- Language: JavaScript
- Homepage: https://react-playful.netlify.com/
- Size: 1.04 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ▶️ Playful
> A simple transition library for React (and routers!)
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Effects](#effects)
- [Direction](#direction)
- [Example](#example)
## Installation
```
npm install --save playful
```
## Usage
```jsx
import {withTransition} from 'playful'
// Create your components as you normally would
const MyComponent = () =>
My Content
// 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 (
)
}
```
## 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!](https://react-playful.netlify.com/iframe.html?selectedKind=Playful&selectedStory=Example&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel)