Permalink
Browse files

Upgradingto standalone Proptypes package and SSR glitch fix is now op…

…tional
  • Loading branch information...
rnosov committed Aug 27, 2017
1 parent 9f09414 commit 8781e9588cfb5b547e3cae1ead862622d78a536d
Showing with 4,576 additions and 12 deletions.
  1. +1 −1 LICENSE.txt
  2. +9 −2 README.md
  3. +1 −1 __tests__/__snapshots__/Reveal.test.js.snap
  4. +4,553 −0 package-lock.json
  5. +4 −3 package.json
  6. +8 −5 src/Reveal.js
View
@@ -1,6 +1,6 @@
The MIT License (MIT)
Copyright (c) 2016 Roman Nosov
Copyright (c) 2016, 2017 Roman Nosov
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
View
@@ -34,14 +34,21 @@ Wrap the jsx that you want to be revealed in your **render** method:
- `effect` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** This prop expects a string containing CSS animation effect. You can use any animate.css animations or use any other CSS based animations. If you're using animate.css don't forget to add *animated* base class. **Required**.
- `onReveal` **[function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function)** Function called once the element is revealed. **Optional**.
- `ssr` **[bool](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Use this option to suppress flickering during server side rendering. Off by default. **Optional**.
### Children
You must also pass at least one child to this component. **Required**.
### Universal Rendering
This component is compatible with universal or server side rendering (SSR).
This component is compatible with universal or server side rendering (SSR). You might want to enable ssr flag if you have any issues with flickering on page startup.
```javascript
<Reveal ssr effect="animated fadeInUp">
<div>Markup that will be revealed on scroll</div>
</Reveal>
```
## Step by Step Instructions
@@ -71,7 +78,7 @@ import 'animate.css/animate.css'; // CSS animation effects library
class App extends Component {
render() {
return (
<div className="App">
<div className="App" style={{overflow: 'hidden'}}>>
<Reveal effect="animated zoomIn" className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
@@ -1 +1 @@
exports[`Reveal renders a initial view 1`] = `"<div class=\"\" style=\"visibility: hidden;\"><div>Test test</div></div>"`;
exports[`Reveal renders a initial view 1`] = `"<div class=\"123\"><div>Test test</div></div>"`;
Oops, something went wrong.

0 comments on commit 8781e95

Please sign in to comment.