React Reveal is an animation framework for React. It's MIT licensed, has a tiny footprint and written specifically for React in ES6. It can be used to create various cool reveal on scroll animations in your application. If you liked this package, don't forget to star the Github repository.
A number of simple effect examples:
Also, there are more complicated examples of animated form errors and a todo app.
In the command prompt run:
npm install react-reveal --save
Alternatively you may use yarn
:
yarn add react-reveal
Import effects from React Reveal to your project. Lets try Zoom
effect first:
import Zoom from 'react-reveal/Zoom';
Place the following code somewhere in your render
method:
<Zoom>
<p>Markup that will be revealed on scroll</p>
</Zoom>
You should see zooming animation that reveals text inside the tag. You can change this text to any JSX you want. If you place this code further down the page you'll see that it'd appear as you scroll down.
You may just wrap your custom React component with the effect of your choosing like so:
<Zoom>
<CustomComponent />
</Zoom>
In such case, in the resulting <CustomComponent />
HTML markup will be wrapped in a div
tag. If you would rather have a different HTML tag then wrap <CustomComponent />
in a tag of your choosing:
<Zoom>
<section>
<CustomComponent />
</section>
</Zoom>
or if you want to customize div
props:
<Zoom>
<div className="some-class">
<CustomComponent />
</div>
</Zoom>
If you don't want any tag at all then another option is to expose DOM ref to react-reveal
. You do that by using refProp
prop. Consider following custom React Component:
function CustomComponent({ innerRef, className, style }) {
return (<div ref={innerRef} className={className} style={style}>Some content</div>);
}
And then you can reveal using following code:
<Zoom refProp="innerRef">
<CustomComponent />
</Zoom>
In this case, react-reveal
will not insert any tags and will use the exposed HTML element. Some React components such as React Router links already expose their refs via innerRef
prop:
<Zoom refProp="innerRef">
<Link to="/">Your Content</Link>
</Zoom>
If you want to reveal an image you can wrap img
tag with with the desired react-reveal
effect:
<Zoom>
<img height="300" width="400" src="https://source.unsplash.com/random/300x400" />
</Zoom>
It would be a very good idea to specify width and height of any image you wish to reveal.
react-reveal
will attach a reveal effect to each child it gets. In other words,
<Zoom>
<div>First Child</div>
<div>Second Child</div>
</Zoom>
will be equivalent to:
<Zoom>
<div>First Child</div>
</Zoom>
<Zoom>
<div>Second Child</div>
</Zoom>
If you don't want this to happen, you should wrap multiple children in a div
tag:
<Zoom>
<div>
<div>First Child</div>
<div>Second Child</div>
</div>
</Zoom>
react-reveal
supports server side rendering out of the box. In some cases, when the javascript bundle arrives much later than the HTML&CSS it might cause a flickering. react-reveal
will try to autodetect this and apply gentle fadeout effect on the initial render to mitigate flickering. If it's something you
don't really want then you can place the following code somewhere near the entry point of your app to disable this fadeout effect on initial loading:
import config from 'react-reveal/globals';
config({ ssrFadeout: false });
react-reveal
is regularly checked against googlebot in the Search Console to make sure that googlebot can see the content in the revealed elements.
For a full documentation please visit online docs.
Clone the this repository using the following command:
git clone https://github.com/rnosov/react-reveal.git
In the cloned directory, you can run following commands:
npm install
Installs required node modules
npm run build
Builds the package for production to the dist
folder
npm test
Runs tests
Copyright © 2018 Roman Nosov. Project source code is licensed under the MIT license.