Permalink
Browse files

initial commit

  • Loading branch information...
rnosov committed Oct 11, 2016
0 parents commit 3642304c1a15110c1ade4cd98833aa740a79f985
Showing with 337 additions and 0 deletions.
  1. +4 −0 .babelrc
  2. +13 −0 .editorconfig
  3. +3 −0 .gitignore
  4. +6 −0 .npmignore
  5. +22 −0 LICENSE.txt
  6. +124 −0 README.md
  7. +24 −0 __tests__/Reveal.test.js
  8. +1 −0 __tests__/__snapshots__/Reveal.test.js.snap
  9. +10 −0 gulpfile.js
  10. +56 −0 package.json
  11. +74 −0 src/Reveal.js
@@ -0,0 +1,4 @@
{
"presets": ["react", "es2015", "stage-0"],
"plugins": ["add-module-exports", "transform-runtime"],
}
@@ -0,0 +1,13 @@
# editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
@@ -0,0 +1,3 @@
dist
node_modules
npm-debug.log
@@ -0,0 +1,6 @@
.gitignore
.git
gulpfile.js
npm-debug.log
node_modules
__tests__
@@ -0,0 +1,22 @@
The MIT License (MIT)
Copyright (c) 2016 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
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
124 README.md
@@ -0,0 +1,124 @@
# React Reveal
Easily add reveal animation to any React component. It is compatible with the excellent [animate.css](https://daneden.github.io/animate.css/) library but you can use any CSS based animations.
[Live Demo](https://www.solarleague.org/) - scroll down to see the reveal animation.
## tl;dr
In the command prompt run:
```sh
npm install react-reveal animate.css --save
```
Import all necessary modules:
```javascript
import Reveal from 'react-reveal'; // this package
import 'animate.css/animate.css'; // CSS animation effects library
```
Wrap the jsx that you want to be revealed in your **render** method:
```javascript
<Reveal effect="animated fadeInUp">
<div>Markup that will be revealed on scroll</div>
</Reveal>
```
## Documentation
### Properties
- `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**.
### 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).
## Step by Step Instructions
In order to start from scratch we'll use Facebook react starter kit called [Create React App](https://github.com/facebookincubator/create-react-app). In the command prompt type:
```sh
npm install -g create-react-app
create-react-app my-app
cd my-app/
npm install react-reveal animate.css --save
subl src/App.js #open with Sublime Text. Or use any other text editor.
npm start
```
Copy and paste the following code into app.js:
```javascript
import React, { Component } from 'react';
import Reveal from 'react-reveal';
import logo from './logo.svg';
import './App.css';
import 'animate.css/animate.css'; // CSS animation effects library
class App extends Component {
render() {
return (
<div className="App">
<Reveal effect="animated zoomIn" className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</Reveal>
<Reveal effect="animated flipInY">
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</Reveal>
{Array(100).fill(
<Reveal effect="animated fadeInLeft">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum fermentum massa, pharetra consectetur nisi pellentesque non. Quisque convallis sit amet ante a maximus. Fusce aliquam cursus eros, nec rutrum ante commodo non. Ut vitae viverra justo. Nam dignissim mollis aliquam. Cras pellentesque est at eros aliquet, sed vestibulum diam mollis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris posuere mauris nec lectus varius, vitae gravida nunc tempor. Mauris ut viverra dolor. Maecenas at faucibus tellus. Quisque gravida mi eget tortor porta, eu rhoncus dui blandit.
</p>
</Reveal>
)}
</div>
);
}
}
export default App;
```
Then open [http://localhost:3000/](http://localhost:3000/) to see this example.
## Forking This Package
Clone the this repository using the following command:
```sh
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
## License
Copyright © 2016 Roman Nosov. This source code is licensed under the MIT license.
@@ -0,0 +1,24 @@
/*
* React Reveal Test Suite
*
* Copyright © Roman Nosov 2016
*
* This source code is licensed under the MIT license found in the
* LICENSE.txt file in the root directory of this source tree.
*/
import React from 'react';
import { mount } from 'enzyme';
import Reveal from '../src/Reveal';
describe('Reveal', () => {
it('renders a initial view', () => {
const content = mount(
<Reveal effect="123">
<div>Test test</div>
</Reveal>
);
expect(content.html()).toMatchSnapshot();
});
});
@@ -0,0 +1 @@
exports[`Reveal renders a initial view 1`] = `"<div class=\"\" style=\"visibility: hidden;\"><div>Test test</div></div>"`;
@@ -0,0 +1,10 @@
const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
gulp.task('build', () =>
gulp.src('./src/**/*.js')
.pipe(babel())
.pipe(uglify())
.pipe(gulp.dest('dist'))
);
@@ -0,0 +1,56 @@
{
"name": "react-reveal",
"version": "0.0.2",
"author": "Roman Nosov <rnosov@gmail.com>",
"description": "Easily add reveal animation to any React component",
"license": "MIT",
"keywords": [
"react",
"reveal",
"scroll",
"animation",
"animate.css",
"universal",
"ssr"
],
"repository": {
"type": "git",
"url": "https://github.com/rnosov/react-reveal"
},
"bugs": {
"url": "https://github.com/rnosov/react-reveal/issues"
},
"homepage": "https://github.com/rnosov/react-reveal",
"main": "./dist/Reveal.js",
"dependencies": {
"babel-runtime": "^6.11.6"
},
"peerDependencies": {
"react": "^15.3.1"
},
"devDependencies": {
"babel-cli": "^6.14.0",
"babel-core": "^6.11.4",
"babel-jest": "^15.0.0",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-runtime": "^6.12.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"enzyme": "^2.4.1",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-uglify": "^2.0.0",
"jest-cli": "^15.1.0",
"react": "^15.3.1",
"react-addons-test-utils": "^15.3.2",
"react-dom": "^15.3.2",
"uglify-js": "^2.7.3"
},
"scripts": {
"build": "./node_modules/gulp/bin/gulp.js build",
"test": "jest .",
"prepublish": "npm run build && npm run test -- -u;"
}
}
@@ -0,0 +1,74 @@
/*
* Reveal React Component
*
* Copyright © Roman Nosov 2016
*
* This source code is licensed under the MIT license found in the
* LICENSE.txt file in the root directory of this source tree.
*/
import React, { Component, PropTypes } from 'react';
const
propTypes = {
effect: PropTypes.string.isRequired,
className: PropTypes.string,
style: PropTypes.object,
children: PropTypes.node.isRequired,
},
defaultProps = {
className: '',
style: {},
};
function getAbsoluteOffsetTop({ offsetTop, offsetParent }) {
return offsetTop + (offsetParent && getAbsoluteOffsetTop(offsetParent));
}
class Reveal extends Component {
state = {
isHidden: false,
isMounted: false,
};
handleScroll = () => {
if (window.pageYOffset + window.innerHeight*0.85 > getAbsoluteOffsetTop(this.refs.el)) {
this.setState({ isHidden: false });
this.componentWillUnmount();
}
};
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll);
}
componentDidMount() {
if (!this.props.effect) return;
if (window.pageYOffset + window.innerHeight > getAbsoluteOffsetTop(this.refs.el)) {
// this.setState({ isHidden: false, isMounted: true });
return;
}
this.setState({ isHidden: true, isMounted: true });
window.setTimeout(this.handleScroll, 100);
window.addEventListener('scroll', this.handleScroll);
}
render() {
const { effect, style, className, ...props } = this.props;
let animation = '', s = {};
if (this.props.effect) {
if (this.state.isHidden)
s.visibility = 'hidden';
else// if (this.state.isMounted)
animation = ( className ? ' ' : '' ) + this.props.effect;
}
return (
<div { ...props } style={ { ...style, ...s } } className={ className + animation } ref="el" />
);
}
}
Reveal.propTypes = propTypes;
Reveal.defaultProps = defaultProps;
export default Reveal;

0 comments on commit 3642304

Please sign in to comment.