initial commit

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["react", "es2015", "stage-0"],
+  "plugins": ["add-module-exports", "transform-runtime"],
+}

.editorconfig

@@ -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

.gitignore

@@ -0,0 +1,3 @@
+dist
+node_modules
+npm-debug.log

.npmignore

@@ -0,0 +1,6 @@
+.gitignore
+.git
+gulpfile.js
+npm-debug.log
+node_modules
+__tests__

LICENSE.txt

@@ -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.
+

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.

__tests__/Reveal.test.js

@@ -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();
+  });
+});

__tests__/__snapshots__/Reveal.test.js.snap

@@ -0,0 +1 @@
+exports[`Reveal renders a initial view 1`] = `"<div class=\"\" style=\"visibility: hidden;\"><div>Test test</div></div>"`;

gulpfile.js

@@ -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'))
+);

package.json

@@ -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;"
+  }
+}

src/Reveal.js

@@ -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;