Awesome
🧞♂️ react-genie
🙋♂️ Made by @thekitze
Other projects:
- 💻 Sizzy - A browser for designers and developers, focused on responsive design
- 🏫 React Academy - Interactive React and GraphQL workshops
- 🔮 Glink - Changelogs, Roadmap, User Requests
- 🐶 Benji - Ultimate wellness and productivity platform
- 🤖 JSUI - A powerful UI toolkit for managing JavaScript apps
- 📹 YouTube Vlog - Follow my journey
<a href="https://zerotoshipped.com"><img style="width:450px" src="https://i.ibb.co/WKQPDv5/twitter-image.jpg" alt="Zero To Shipped"></a>
Used on sizzy.co
CodeSandbox
https://codesandbox.io/s/react-genie-example-8xfsc
Demo
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:
import {RevealGlobalStyles} from 'react-genie'
const App = () => {
return (
<div>
<RevealGlobalStyles />
<div> rest of the app </div>
</div>
);
};
Default animation:
import {Reveal} from 'react-genie';
<Reveal>
<h1>The default animation is fade in</h1>
</Reveal>
Props:
{
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
}
Specifying animation using the 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.
Wrap vs Clone
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.
The AnimatedTitle
component
import {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.