🧞‍♂️ react-genie

$3

$3

- 💻 Sizzy - A browser for developers and designers
- 🏫 React Academy - Interactive React and GraphQL workshops
- 💌 Twizzy - A standalone app for Twitter DM
- 🤖 JSUI - A powerful UI toolkit for managing JavaScript apps

Used on sizzy.co

!animation

CodeSandbox

https://codesandbox.io/s/react-genie-example-8xfsc

Demo

https://8xfsc.csb.app/

Dependencies

- styled-components
- layout-styled-components
- react-animations
- react-intersection-observer

Usage

yarn add react-genie

Just render the RevealGlobalStyles component anywhere, so it will add the class names for the animations:

``jsx
import {RevealGlobalStyles} from 'react-genie'

const App = () => {
return (



);
};
`

$3

`jsx
import {Reveal} from 'react-genie';

The default animation is fade in

`

Props:

`js
{
animation?: string; // animation class name
delay?: number; // animation delay
mode?: RevealMode; // "clone" or "wrap"
debugName?: string; // if you specify it, you will get console logs
style?: CSSObject; // extra styles
onShowDone?: () => void; // callback after show
}
`

$3

`jsx
import {Reveal, Animation} from 'react-genie';

This title will slide in from the left

`
Hint: you can also pass your own class name here if you have custom animations.

$3

The default mode is wrap, so the children element will be wrapped in an additional div.
If you don't want that additional div, you can use clone or RevealMode.Clone.

`jsx
import {Reveal, RevealMode} from 'react-genie';




This h1 will be cloned instead of wrapped



`

In order for clone to work your element needs to accept className, style, and ref, as props. So, if you're trying to clone custom components, make sure they support these props.

$3


`jsx
import {Reveal, AnimatedTitle} from 'react-genie';


This sentence will animate in word by word

`

The AnimatedTitle component will split the children` prop word by word (so it should be a string), and animate each word with a delay in between.