https://codesandbox.io/s/react-genie-example-8xfsc
yarn add react-genie
Just render the RevealGlobalStyles
component anywhere, so it will add the class names for the animations:
import {RevealGlobalStyles} from 'react-genie'
const App = () => {
return (
<div>
<RevealGlobalStyles />
<div> rest of the app </div>
</div>
);
};
import {Reveal} from 'react-genie';
<Reveal>
<h1>The default animation is fade in</h1>
</Reveal>
{
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
}
animation
prop:import {Reveal, Animation} from 'react-genie';
<Reveal animation={Animation.SlideInLeft}>
<h1>This title will slide in from the left</h1>
</Reveal>
Hint: you can also pass your own class name here if you have custom animations.
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
.
import {Reveal, RevealMode} from 'react-genie';
<Reveal mode={RevealMode.Clone}>
<h1>This h1 will be cloned instead of wrapped</h1>
</Reveal>
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.
AnimatedTitle
componentimport {Reveal, AnimatedTitle} from 'react-genie';
<AnimatedTitle>
This sentence will animate in word by word
</AnimatedTitle>
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.