Initial commit

gkaemmer · May 8, 2017 · 34472e4 · 34472e4
commit 34472e4
Show file tree

Hide file tree

Showing 13 changed files with 234 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "stage-2", "react"]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+yarn.lock
+
+lib
+dist
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,3 @@
+example
+webpack.config.js
+yarn.lock
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,2 @@
+### v0.0.1
+- Initial version
diff --git a/README.md b/README.md
@@ -0,0 +1,31 @@
+# react-fade-in
+Dead-simple and opinionated component to fade in an element's children.
+![React Fade In](/example/example.gif)
+
+## Installation
+
+`npm install react-fade-in`
+
+## Usage
+
+`react-fade-in` 
+
+```
+import FadeIn from 'react-fade-in';
+// ...
+<FadeIn>
+  <div>Element 1</div>
+  <div>Element 2</div>
+  <div>Element 3</div>
+  <div>Element 4</div>
+  <div>Element 5</div>
+  <div>Element 6</div>
+</FadeIn>
+```
+
+## API
+
+### `FadeIn`
+Animates its children, one by one. Takes no props. To have things animate at different times, they must be first-level children of the `<FadeIn>` component (i.e. members of `props.children`).
+
+Happy fading.
diff --git a/example/FadeInTest.js b/example/FadeInTest.js
@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import FadeIn from '../src/index';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  text-align: center;
+  padding: 20px;
+  font-family: Helvetica, Arial, sans-serif;
+`;
+
+const Title = styled.h1`
+  font-weight: normal;
+  font-size: 2em;
+  margin: 0 0 10px;
+`;
+
+const Element = styled.div`
+  line-height: 1.5em;
+`;
+
+export default class FadeInTest extends Component {
+  render() {
+    return (
+      <Container>
+        <Title>React Fade-In</Title>
+        <FadeIn>
+          <Element>Element 1</Element>
+          <Element>Element 2</Element>
+          <Element>Element 3</Element>
+          <Element>Element 4</Element>
+          <Element>Element 5</Element>
+          <Element>Element 6</Element>
+        </FadeIn>
+      </Container>
+    );
+  }
+}
diff --git a/example/client.js b/example/client.js
@@ -0,0 +1,5 @@
+import ReactDOM from 'react-dom';
+import React from 'react';
+import FadeInTest from './FadeInTest';
+
+ReactDOM.render(<FadeInTest />, document.getElementById('root'));
diff --git a/example/example.gif b/example/example.gif
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>React Fade-In Example</title>
+    <style>
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "react-fade-in",
+  "version": "0.1.4",
+  "description": "Super-easy fade-in animation for react children",
+  "main": "lib/index.js",
+  "repository": {
+    "url": "git@github.com:gkaemmer/react-fade-in.git",
+    "type": "git"
+  },
+  "scripts": {
+    "build": "npm run build:clean && npm run build:lib",
+    "build:clean": "rm -rf lib",
+    "build:lib": "babel src --out-dir lib",
+    "prepublish": "NODE_ENV=production npm run build",
+    "start": "EXAMPLE=true webpack-dev-server --port 3124 --hot --inline --content-base example/public"
+  },
+  "author": "Graham Kaemmer",
+  "license": "MIT",
+  "dependencies": {},
+  "devDependencies": {
+    "babel-cli": "^6.18.0",
+    "babel-core": "^6.20.0",
+    "babel-loader": "^6.2.9",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-react": "^6.16.0",
+    "babel-preset-stage-2": "^6.18.0",
+    "html-webpack-plugin": "^2.24.1",
+    "react": "^15.4.1",
+    "react-dom": "^15.4.1",
+    "styled-components": "^1.1.3",
+    "webpack": "^1.14.0",
+    "webpack-dev-server": "^1.16.2"
+  },
+  "peerDependencies": {
+    "react": "^15.4.1"
+  }
+}
diff --git a/src/FadeIn.js b/src/FadeIn.js
@@ -0,0 +1,41 @@
+import React, { Component } from "react";
+
+export default class FadeIn extends Component {
+  state = {
+    maxIsVisible: 0
+  };
+
+  componentDidMount() {
+    const count = React.Children.count(this.props.children);
+    let i = 0;
+    this.interval = setInterval(() => {
+      i++;
+      if (i > count)
+        clearInterval(this.interval);
+
+      this.setState({ maxIsVisible: i });
+    }, 50);
+  }
+
+  render() {
+    const duration = 0.4;
+    return (
+      <div>
+        {React.Children.map(this.props.children, (child, i) => {
+          return (
+            <div
+              style={{
+                transition: `opacity ${duration}s, top ${duration}s`,
+                position: "relative",
+                top: this.state.maxIsVisible > i ? 0 : 20,
+                opacity: this.state.maxIsVisible > i ? 1 : 0
+              }}
+            >
+              {child}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+}
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1 @@
+export { default } from './FadeIn';
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,52 @@
+var webpack = require('webpack');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var path = require('path');
+var env = process.env.NODE_ENV;
+var isExample = process.env.EXAMPLE;
+
+var config = {
+  entry: {
+    'react-appear': path.join(__dirname, 'src', 'index.js')
+  },
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: '[name].js'
+  },
+  module: {
+    loaders: [
+      { test: /\.js$/, loaders: ['babel-loader'], exclude: /node_modules/ }
+    ]
+  },
+  plugins: [
+    new webpack.optimize.OccurrenceOrderPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(env)
+    })
+  ]
+};
+
+if (env === 'production') {
+  config.plugins.push(
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      }
+    })
+  )
+}
+
+if (isExample) {
+  // Build example
+  config.entry = {
+    index: path.join(__dirname, 'example', 'client.js')
+  };
+  config.output.path = path.join(__dirname, 'example', 'public');
+  config.plugins.push(
+    new HtmlWebpackPlugin({
+      template: './example/index.html'
+    })
+  );
+}
+
+
+module.exports = config