initial commit

Author: saebekassebil

README.md

@@ -0,0 +1,29 @@
+# react-counter
+
+A dead-simple incremental counter component with easing animations.
+
+    npm install react-counter
+
+```js
+var React = require('react');
+var Counter = require('react-counter');
+
+React.render(
+  <Counter begin={0} end={1000} time={2000} easing="outCube" />,
+  document.body
+);
+```
+
+## Usage
+
+```js
+<Counter
+  begin={Number}  // The number to count from
+  end={Number}    // The number to count to
+  time={Number}   // The time (in ms) the counting animation should take
+  easing={String} // Which easing function to use (default="outCube")
+  />
+```
+
+The `easing` property, can be a name of any easing function from
+[ease-component](https://www.npmjs.com/package/ease-component)

index.js

@@ -0,0 +1,45 @@
+var React = require('react');
+var raf = require('raf');
+var ease = require('ease-component');
+
+var Counter = React.createClass({
+  getInitialState: function() {
+    return { value: this.props.begin };
+  },
+
+  componentDidMount: function() {
+    this.start = Date.now();
+    raf(this.animate);
+  },
+
+  animate: function() {
+    if (this.stop) return;
+
+    raf(this.animate);
+    this.draw()
+  },
+
+  draw: function() {
+    if (!this.isMounted()) return;
+
+    var time = this.props.time;
+    var begin = this.props.begin;
+    var end = this.props.end;
+    var easing = this.props.easing;
+
+    easing = easing && easing in ease ? easing : 'outCube';
+    var now = Date.now()
+    if (now - this.start >= time) this.stop = true;
+    var percentage = (now - this.start) / time;
+    var easeVal = ease[easing](percentage);
+    var val = begin + (end - begin) * easeVal;
+
+    this.setState({ value: val });
+  },
+
+  render: function() {
+    return React.DOM.span({ className: 'counter' }, Math.round(this.state.value));
+  }
+});
+
+module.exports = Counter;

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "react-counter",
+  "version": "1.0.0",
+  "description": "Simple incremental counter with easings",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/saebekassebil/react-counter.git"
+  },
+  "keywords": [
+    "counter",
+    "incremental",
+    "animation",
+    "react-component"
+  ],
+  "author": "Jakob Miland",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/saebekassebil/react-counter/issues"
+  },
+  "homepage": "https://github.com/saebekassebil/react-counter",
+  "dependencies": {
+    "ease-component": "^1.0.0",
+    "raf": "^2.0.4",
+    "react": "^0.12.2"
+  }
+}