glennreyes · glennreyes · Oct 8, 2016 · Oct 8, 2016
diff --git a/.eslintignore b/.eslintignore
@@ -2,3 +2,4 @@ build
 coverage
 lib
 test
+example
diff --git a/example/hello-world/.gitignore b/example/hello-world/.gitignore
@@ -0,0 +1,15 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+build
+
+# misc
+.DS_Store
+.env
+npm-debug.log
diff --git a/example/hello-world/README.md b/example/hello-world/README.md
@@ -0,0 +1,15 @@
+React CountUp Hello World Example
+==============================
+
+This is a very simple — yet runnable app — showing how to use React CountUp.
+
+## Running Example
+
+**In the project directory, run:**
+```
+$ npm install
+$ npm start
+```
+**Open [http://localhost:3000](http://localhost:3000) to view it in the browser.**
+
+[User Guide](http://localhost:3000)
diff --git a/example/hello-world/package.json b/example/hello-world/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "hello-world",
+  "version": "0.1.0",
+  "private": true,
+  "devDependencies": {
+    "react-scripts": "0.6.0",
+    "highlight.js": "^9.6.0",
+    "react-highlight.js": "^1.0.5",
+    "sanitize.css": "^4.1.0"
+  },
+  "dependencies": {
+    "countup.js": "^1.7.1",
+    "react": "^15.3.2",
+    "react-countup": "^1.2.0",
+    "react-dom": "^15.3.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build"
+  }
+}
diff --git a/example/hello-world/public/index.html b/example/hello-world/public/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tag above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favico.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React CountUp</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start`.
+      To create a production bundle, use `npm run build`.
+    -->
+  </body>
+</html>
diff --git a/example/hello-world/src/App.css b/example/hello-world/src/App.css
@@ -0,0 +1,163 @@
+*:focus {
+  outline: 0;
+}
+
+body {
+  background: mintcream;
+  font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 16px;
+}
+
+code {
+  border-radius: 3px;
+  font-family: Inconsolata, monospace;
+}
+
+h1 {
+  color: slategray;
+  font-size: 4rem;
+  font-weight: 400;
+  text-align: center;
+  margin: 0 0 1em;
+}
+
+h2 {
+  color: slategray;
+  font-size: 2rem;
+  font-weight: 400;
+  margin: 1.5em 0 .5em;
+}
+
+p, label {
+  color: darkslategray;
+}
+
+.Wrapper {
+  margin: 0 auto;
+  max-width: 80vmax;
+  min-height: 100vh;
+  padding: 2rem 1rem;
+}
+
+.Description {
+  font-size: 1.25rem;
+}
+
+.Demo {
+  border-color: slategray;
+  border-style: solid;
+  border-width: 2px 0;
+  text-align: center;
+}
+
+.CountUp {
+  color: lightslategray;
+  font-size: 20vmin;
+  font-weight: 300;
+}
+
+.Form {
+  font-size: 1.25rem;
+
+  &__groups {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+  }
+
+  &__group {
+    padding: 1rem;
+  }
+}
+
+.Label {
+  display: block;
+  margin-left: auto;
+  padding: .5em;
+}
+
+.TextField {
+  background: slategray;
+  border-radius: 3px;
+  box-shadow:
+    0 1px 0 0 dimgray,
+    0 2px 0 0 dimgray,
+    0 3px 0 0 dimgray,
+    0 4px 0 0 dimgray;
+  color: white;
+  display: block;
+  min-width: 10rem;
+  padding: .5em;
+}
+
+.Button {
+  background: dimgray;
+  border-radius: 3px;
+  box-shadow:
+    0 1px 0 0 darkslategray,
+    0 2px 0 0 darkslategray,
+    0 3px 0 0 darkslategray,
+    0 4px 0 0 darkslategray;
+  color: white;
+  cursor: pointer;
+  display: block;
+  flex-grow: 2;
+  margin: 2em auto;
+  min-width: 10rem;
+  padding: 1em 3em;
+  transition: background .4s;
+
+  &:hover {
+    background: darkslategray;
+  }
+}
+
+.Footer {
+  font-size: 1rem;
+  margin: 4em 0 0;
+  text-align: center;
+}
+
+.Emoji {
+  font-family: 'Apple Color Emoji', 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  margin-right: .1875em;
+}
+
+
+/**
+ * GitHub Corner
+ */
+.Octo {
+  fill: #fd6c6c;
+  color: #fff;
+  position: absolute;
+  top: 0;
+  border: 0;
+  right: 0;
+  height: 20vmin;
+  width: 20vmin;
+  min-height: 6rem;
+  min-width: 6rem;
+
+  &__arm {
+    transform-origin: 130px 106px;
+  }
+
+  &:hover .Octo__arm {
+    animation: octocat-wave 560ms ease-in-out;
+  }
+}
+
+@keyframes octocat-wave {
+  0%,100% {
+    transform: rotate(0);
+  }
+
+  20%,60% {
+    transform: rotate(-25deg);
+  }
+
+  40%,80% {
+    transform: rotate(10deg);
+  }
+}
diff --git a/example/hello-world/src/App.js b/example/hello-world/src/App.js
@@ -0,0 +1,143 @@
+import React, { Component } from 'react';
+import Highlight from 'react-highlight.js';
+import '!!style!css!highlight.js/styles/solarized-dark.css';
+import 'sanitize.css/sanitize.css';
+
+import CountUp from 'react-countup';
+import './App.css';
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      start: 0,
+      end: (new Date()).getFullYear() || 2016,
+      duration: 3,
+    };
+
+    this.startAnimation = this.startAnimation.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(event) {
+    const { name, value } = event.target;
+
+    this.setState({ [name]: Math.round(value) });
+  }
+
+  startAnimation(event) {
+    this.forceUpdate();
+    event.preventDefault();
+  }
+
+  render() {
+    const { start, end, duration } = this.state;
+
+    /* eslint-disable max-len */
+    const githubCorner = (
+      <a href="https://github.com/glennreyes/react-countup">
+        <svg
+          className="Octo"
+          width="80"
+          height="80"
+          viewBox="0 0 250 250"
+        >
+          <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
+          <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" className="Octo__arm" />
+          <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" />
+        </svg>
+      </a>
+    );
+
+    return (
+      <div className="Wrapper">
+        <header>
+          <h1>React CountUp</h1>
+          <p className="styles.Description">
+            A React component wrapper around <a
+              href="//inorganik.github.io/countUp.js/"
+            >CountUp.js</a>.
+            This component counts up a number in an animated way.
+          </p>
+          {githubCorner}
+        </header>
+
+        <section>
+          <h2>Demo</h2>
+          <div className="Demo">
+            <CountUp className="CountUp" start={start} end={end} duration={duration} />
+          </div>
+
+          <form className="Form">
+            <div className="Form__groups">
+              <div className="Form__group">
+                <label className="Label" htmlFor="start">Start: </label>
+                <input
+                  id="start"
+                  className="TextField"
+                  type="text"
+                  name="start"
+                  value={start}
+                  onChange={this.handleChange}
+                />
+              </div>
+              <div className="Form__group">
+                <label className="Label" htmlFor="end">End: </label>
+                <input
+                  id="end"
+                  className="TextField"
+                  type="text"
+                  name="end"
+                  value={end}
+                  onChange={this.handleChange}
+                />
+              </div>
+              <div className="Form__group">
+                <label className="Label" htmlFor="duration">Duration in seconds: </label>
+                <input
+                  id="duration"
+                  className="TextField"
+                  type="text"
+                  name="duration"
+                  value={duration}
+                  onChange={this.handleChange}
+                />
+              </div>
+            </div>
+            <button className="styles.Button" onClick={this.startAnimation}>Start animation</button>
+          </form>
+        </section>
+
+        <section>
+          <h2>Installation</h2>
+          <Highlight>
+            npm install react-countup --save
+          </Highlight>
+        </section>
+
+        <section>
+          <h2>Usage</h2>
+          <Highlight>
+            {`import React from 'react';
+            import { render } from 'react-dom';
+            import CountUp from 'react-countup';
+
+            render(
+              <CountUp start={${start}} end={${end}} duration={${duration}} />,
+              document.getElementById('root')
+            );`}
+          </Highlight>
+        </section>
+
+        <footer className="Footer">
+          <p>Handcrafted with <span
+            className="Emoji"
+          >❤️</span> by <a href="//twitter.com/glnnrys">Glenn Reyes</a></p>
+        </footer>
+      </div>
+    );
+  }
+}
+
+export default App;