├── .babelrc
├── .gitignore
├── .npmignore
├── README.md
├── lib
    ├── index.js
    └── style.css
├── package.json
├── src
    └── index.js
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets" : [ "env", "react" ]
3 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | src
3 | webpack.config.js
4 | .babelrc
5 | .gitignore


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-rain-animation
 2 | A stateful rain animation component for your react project. No SVG animations no jQuery, no additional dependencies. Addapted from raichu26's [codepen](https://codepen.io/alemesre/pen/hAxGg?q=css%20rain&limit=all&order=popularity&depth=everything&show_forks=false). Live demo [here](https://willnickerson.github.io/react-rain-demo)
 3 | 
 4 | 
 5 | ## Installation
 6 | 
 7 | To install this Component, run `yarn add react-rain-animation` or `npm install react-rain-animation`.
 8 | 
 9 | ## Usage
10 | 
11 | ##Simple
12 | 
13 | To use the component, In your react Application just import the component and styles. Also make sure to specify the numDrops property, as it is required.
14 | 
15 | ```javascript
16 | import React from 'react';
17 | import ReactRain from 'react-rain-animation';
18 | 
19 | // import all the styles
20 | import "react-rain-animation/lib/style.css";
21 | 
22 | 
23 | const MyComponent = (props) => {
24 | 
25 |     return (
26 |         <ReactRain
27 |           numDrops="500"
28 |         />
29 | 
30 | }
31 | 
32 | export default MyComponent;
33 | 
34 | 
35 | ```
36 | 
37 | ###With Changing State
38 | 
39 | To have user input change the number of drops rendered, include this component and some sort of input component (this example uses react-canvas-knob) as sibblings inside of a parent component. 
40 | 
41 | To avoid the "Maximum call stack size exceded" error, make sure to have 2 separate handlers (i.e. onChange and onChaneEnd). This way, the number of drops does not have to update every time the input value changes, but rather when the user has finished changing the input.
42 | 
43 | 
44 | ```javascript
45 | 
46 | import React, { Component } from 'react';
47 | import ReactRain from 'react-rain-animation';
48 | import Knob from 'react-canvas-knob';
49 | import 'react-rain-animation/lib/style.css';
50 | 
51 | const initVal = 25;
52 | 
53 | class MyComponent extends Component {
54 |   constructor(props) {
55 |     super(props);
56 | 
57 |     this.state = {
58 |       numDrops: initVal,
59 |       knobValue: initVal
60 |     };
61 |   }
62 | 
63 |   handleChange = newValue => {
64 |     this.setState({ knobValue: newValue });
65 |   }
66 | 
67 |   onChangeEnd = () => {
68 |     console.log(this.state.numDrops);
69 |     this.setState({ numDrops: this.state.knobValue });
70 |   }
71 | 
72 |   render() {
73 |     return (
74 |       <div>
75 |         <ReactRain numDrops={ this.state.numDrops }/>
76 | 
77 |         <Knob className="Knob"
78 |           onChange={ this.handleChange }
79 |           onChangeEnd={ this.onChangeEnd }
80 |           value={ this.state.knobValue }
81 |         /> 
82 |       </div>
83 |     );
84 |   }
85 | }
86 | 
87 | export default MyComponent;
88 | 
89 | 
90 | ```
91 | 
92 | 
93 | 
94 | 


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.CodeHighlight=t(require("react")):e.CodeHighlight=t(e.react)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var a=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),s=n(1),c=r(s),f=n(2),p=r(f),l=function(e){function t(){return o(this,t),i(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return u(t,e),a(t,[{key:"startRain",value:function(){for(var e=document.getElementById("Rain"),t=1;t<this.props.numDrops;t++){var n=this.randRange(0,1600),r=this.randRange(-1e3,1400),o=document.createElement("div");o.setAttribute("class","drop"),o.setAttribute("id","drop"+t),e.appendChild(o),o.style.left=n+"px",o.style.top=r+"px"}}},{key:"componentDidUpdate",value:function(e,t){this.props.numDrops!==e.numDrops&&(this.stopRain(),this.startRain())}},{key:"stopRain",value:function(){for(var e=document.getElementById("Rain");e.hasChildNodes();)e.removeChild(e.lastChild)}},{key:"randRange",value:function(e,t){return Math.floor(Math.random()*(t-e+1))+e}},{key:"componentDidMount",value:function(){this.startRain()}},{key:"render",value:function(){return c.default.createElement("div",{id:"Rain"})}}]),t}(s.Component);l.propTypes={numDrops:p.default.number.isRequired},t.default=l},function(t,n){t.exports=e},function(e,t,n){e.exports=n(3)()},function(e,t,n){"use strict";var r=n(4),o=n(5),i=n(6);e.exports=function(){function e(e,t,n,r,u,a){a!==i&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,n){"use strict";function r(e,t,n,r,i,u,a,s){if(o(t),!e){var c;if(void 0===t)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var f=[n,r,i,u,a,s],p=0;c=new Error(t.replace(/%s/g,function(){return f[p++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}var o=function(e){};e.exports=r},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}])});


--------------------------------------------------------------------------------
/lib/style.css:
--------------------------------------------------------------------------------
 1 | /* rain drop styles */
 2 | 
 3 | .drop {
 4 |   background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(rgba(255,255,255,0.5))  );
 5 |   background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.5) 100%);
 6 | 	width:1px;
 7 | 	height:89px;
 8 | 	position: absolute;
 9 | 	bottom:200px;
10 | 	-webkit-animation: fall .63s linear infinite;
11 |   -moz-animation: fall .63s linear infinite;
12 | }
13 | 
14 | /* drop animation styles */
15 | @-webkit-keyframes fall {
16 | 	to {margin-top:900px;}
17 | }
18 | @-moz-keyframes fall {
19 | 	to {margin-top:900px;}
20 | }
21 | 
22 | @keyframes fall {
23 |   to {margin-top:900px;}
24 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-rain-animation",
 3 |   "version": "1.0.3",
 4 |   "description": "rain animation component",
 5 |   "main": "lib/index.js",
 6 |   "scripts": {
 7 |     "watch": "cross-env NODE_ENV=development webpack -w",
 8 |     "build:dev": "cross-env NODE_ENV=development webpack",
 9 |     "build:production": "cross-env NODE_ENV=production webpack -p"
10 |   },
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "git+https://github.com/willnickerson/react-rain-animation.git"
14 |   },
15 |   "author": "Will Nickerson",
16 |   "license": "ISC",
17 |   "bugs": {
18 |     "url": "https://github.com/willnickerson/react-rain-animation/issues"
19 |   },
20 |   "homepage": "https://github.com/willnickerson/react-rain-animation#readme",
21 |   "devDependencies": {
22 |     "babel-core": "^6.25.0",
23 |     "babel-loader": "^7.1.1",
24 |     "babel-preset-env": "^1.6.0",
25 |     "babel-preset-react": "^6.24.1",
26 |     "cross-env": "^5.0.5",
27 |     "react": "^15.6.1",
28 |     "react-dom": "^15.6.1",
29 |     "webpack": "^3.5.1"
30 |   },
31 |   "peerDependency": {
32 |     "highlight.js": "^9.11.0",
33 |     "react": "^15.5.4",
34 |     "react-dom": "^15.5.4"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | 
 4 | class Rain extends Component {
 5 |   startRain() {
 6 |     const rainSection = document.getElementById('Rain');
 7 | 
 8 |     for(let i = 1; i < this.props.numDrops; i++) {
 9 |       const dropLeft = this.randRange(0, 1600);
10 |       const dropTop = this.randRange(-1000, 1400);
11 | 
12 |       const drop = document.createElement('div');
13 | 
14 |       drop.setAttribute('class', 'drop');
15 |       drop.setAttribute('id', `drop${i}`);
16 | 
17 |       rainSection.appendChild(drop);
18 | 
19 |       drop.style.left = `${dropLeft}px`;
20 |       drop.style.top = `${dropTop}px`;
21 |     }
22 |   }
23 | 
24 |   componentDidUpdate(prevProps, prevState) {
25 |     if(this.props.numDrops !== prevProps.numDrops) {
26 |       this.stopRain();
27 |       this.startRain()
28 |     }
29 |   }
30 | 
31 |   stopRain() {
32 |     const rainSection = document.getElementById('Rain');
33 | 
34 |     while(rainSection.hasChildNodes()) {
35 |       rainSection.removeChild(rainSection.lastChild);
36 |     }
37 |   }
38 | 
39 |   randRange(minNum, maxNum) {
40 |     return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
41 |   }
42 | 
43 |   componentDidMount() {
44 |     this.startRain();
45 |   }
46 | 
47 |   render() {
48 |     return (
49 |       <div id="Rain"/>
50 |     );
51 |   }
52 | }
53 | 
54 | Rain.propTypes = {
55 |   numDrops: PropTypes.number.isRequired
56 | };
57 | 
58 | export default Rain;


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const path = require('path');
 3 | 
 4 | const BUILD_DIR = path.resolve(__dirname, 'lib');
 5 | const APP_DIR = path.resolve(__dirname, 'src');
 6 | 
 7 | const WebpackConfig = {
 8 | 
 9 |   entry: APP_DIR + '/index.js',
10 | 
11 |   output: {
12 |     path: BUILD_DIR,
13 |     filename: 'index.js',
14 |     libraryTarget: 'umd',
15 |     library: 'CodeHighlight'
16 |   },
17 | 
18 |   module: {
19 |     rules: [
20 |       {
21 |         loader: 'babel-loader',
22 |         test: /.js$/,
23 |         exclude: /node_modules/,
24 |         include: APP_DIR,
25 |         options: {
26 |           presets: ['env', 'react']
27 |         }
28 |       },
29 |       {
30 |         test: /\.css$/,
31 |         exclude: /node_modules/,
32 |         loaders: ['style-loader', 'css-loader'],
33 |       },
34 |     ],
35 |   },
36 | 
37 | }
38 | // webpack production config.
39 | if (process.env.NODE_ENV === 'production') {
40 | 
41 |   WebpackConfig.externals = {
42 |     'react': 'react',
43 |     'react-dom': 'react-dom'
44 |   };
45 | 
46 |   WebpackConfig.plugins = [
47 |     new webpack.optimize.AggressiveMergingPlugin(),
48 |     new webpack.optimize.UglifyJsPlugin({
49 |       beautify: false,
50 |       mangle: {
51 |         screw_ie8: true,
52 |       },
53 |       compress: {
54 |         warnings: false,
55 |         screw_ie8: true
56 |       },
57 |       comments: false
58 |     }),
59 |   ];
60 | 
61 | }
62 | 
63 | 
64 | module.exports = WebpackConfig;
65 | 


--------------------------------------------------------------------------------