react-countup - npm Package Compare versions

Comparing version 2.1.1 to 2.2.0

build/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.startAnimation = undefined;
+exports.startAnimation = exports.formatNumber = undefined;
 
@@ -27,46 +27,59 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
+// Adapted from the countup.js format number function
+// https://github.com/inorganik/countUp.js/blob/master/countUp.js#L46-L60
+var formatNumber = exports.formatNumber = function formatNumber(start, options) {
+  var num = '' + start.toFixed(options.decimals);
+  var x = num.split('.');
+  var x1 = x[0];
+  var x2 = x.length > 1 ? '' + options.decimal + x[1] : '';
+  var rgx = /(\d+)(\d{3})/;
+
+  if (options.useGrouping && options.separator) {
+    while (rgx.test(x1)) {
+      x1 = x1.replace(rgx, '$1' + options.separator + '$2');
+    }
+  }
+  return '' + options.prefix + x1 + x2 + options.suffix;
+};
+
 var startAnimation = exports.startAnimation = function startAnimation(component) {
-  if (component && component.spanElement) {
-    var _component$props = component.props,
-        _decimal = _component$props.decimal,
-        _decimals = _component$props.decimals,
-        _duration = _component$props.duration,
-        _easingFn = _component$props.easingFn,
-        _end = _component$props.end,
-        _formattingFn = _component$props.formattingFn,
-        _onComplete = _component$props.onComplete,
-        _onStart = _component$props.onStart,
-        _prefix = _component$props.prefix,
-        _separator = _component$props.separator,
-        _start = _component$props.start,
-        _suffix = _component$props.suffix,
-        _useEasing = _component$props.useEasing,
-        _useGrouping = _component$props.useGrouping;
+  if (!(component && component.spanElement)) {
+    throw new Error('You need to pass the CountUp component as an argument!\neg. this.myCountUp.startAnimation(this.myCountUp);');
+  }
 
+  var _component$props = component.props,
+      decimal = _component$props.decimal,
+      decimals = _component$props.decimals,
+      duration = _component$props.duration,
+      easingFn = _component$props.easingFn,
+      end = _component$props.end,
+      formattingFn = _component$props.formattingFn,
+      onComplete = _component$props.onComplete,
+      onStart = _component$props.onStart,
+      prefix = _component$props.prefix,
+      separator = _component$props.separator,
+      start = _component$props.start,
+      suffix = _component$props.suffix,
+      useEasing = _component$props.useEasing,
+      useGrouping = _component$props.useGrouping;
 
-    var countupInstance = new _countup2.default(component.spanElement, _start, _end, _decimals, _duration, {
-      decimal: _decimal,
-      easingFn: _easingFn,
-      formattingFn: _formattingFn,
-      separator: _separator,
-      prefix: _prefix,
-      suffix: _suffix,
-      useEasing: _useEasing,
-      useGrouping: _useGrouping
-    });
 
-    if (typeof _onStart === 'function') {
-      _onStart();
-    }
+  var countupInstance = new _countup2.default(component.spanElement, start, end, decimals, duration, {
+    decimal: decimal,
+    easingFn: easingFn,
+    formattingFn: formattingFn,
+    separator: separator,
+    prefix: prefix,
+    suffix: suffix,
+    useEasing: useEasing,
+    useGrouping: useGrouping
+  });
 
-    countupInstance.start(_onComplete);
-  } else {
-    throw new Error('You need to pass the CountUp component as an argument!\neg. this.myCountUp.startAnimation(this.myCountUp);');
+  if (typeof onStart === 'function') {
+    onStart();
   }
+
+  countupInstance.start(onComplete);
 };
 
-/**
- * Component
- */
-
 var CountUp = function (_Component) {
@@ -114,3 +127,9 @@ _inherits(CountUp, _Component);
           start = _props.start,
-          style = _props.style;
+          style = _props.style,
+          decimal = _props.decimal,
+          decimals = _props.decimals,
+          useGrouping = _props.useGrouping,
+          separator = _props.separator,
+          prefix = _props.prefix,
+          suffix = _props.suffix;
 
@@ -121,3 +140,10 @@
         { className: className, style: style, ref: this.refSpan },
-        start
+        formatNumber(start, {
+          decimal: decimal,
+          decimals: decimals,
+          useGrouping: useGrouping,
+          separator: separator,
+          prefix: prefix,
+          suffix: suffix
+        })
       );
@@ -124,0 +150,0 @@ }

package.json

 {
   "name": "react-countup",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "A React component wrapper around CountUp.js",
@@ -26,11 +26,12 @@ "author": "Glenn Reyes <[e-mail]> (https://twitter.com/glnnrys)",
   "files": [
-    "index.jsx",
+    "index.js",
     "build"
   ],
   "scripts": {
-    "build": "babel index.jsx -d build",
+    "build": "babel index.js -d build",
     "flow": "flow check",
-    "lint": "eslint --ext .js,.jsx index.jsx",
+    "lint": "eslint --ext .js,.jsx index.js",
     "precommit": "lint-staged",
-    "prepublish": "yarn run build",
+    "prepare": "yarn run build",
+    "prettier": "prettier --single-quote --trailing-comma all --parser flow --write index.js",
     "test": "jest --coverage"
@@ -45,23 +46,23 @@ },
   "devDependencies": {
-    "babel": "6.23.0",
     "babel-cli": "^6.24.1",
     "babel-eslint": "^7.2.3",
     "babel-plugin-transform-flow-strip-types": "6.22.0",
-    "babel-preset-env": "^1.4.0",
+    "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "6.24.1",
-    "eslint": "^3.15.0",
-    "eslint-config-airbnb": "^14.1.0",
-    "eslint-plugin-flowtype": "^2.32.1",
-    "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^3.0.2 || ^4.0.0",
-    "eslint-plugin-react": "^6.9.0",
-    "flow-bin": "^0.45.0",
-    "husky": "^0.13.2",
-    "jest": "^20.0.0",
-    "lint-staged": "^3.4.1",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4",
-    "react-test-renderer": "^15.5.4"
+    "eslint": "^4.4.1",
+    "eslint-config-airbnb": "^15.1.0",
+    "eslint-plugin-flowtype": "^2.35.0",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-jsx-a11y": "^5.0.3",
+    "eslint-plugin-react": "^7.2.0",
+    "flow-bin": "^0.52.0",
+    "husky": "^0.14.3",
+    "jest": "^20.0.4",
+    "lint-staged": "^4.0.3",
+    "prettier": "^1.5.3",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-test-renderer": "^15.6.1"
   }
 }

README.md

 # [React CountUp](https://glennreyes.github.io/react-countup)
 
-[![Greenkeeper badge](https://badges.greenkeeper.io/glennreyes/react-countup.svg)](https://greenkeeper.io/)
 [![Build Status](https://travis-ci.org/glennreyes/react-countup.svg?branch=master)](https://travis-ci.org/glennreyes/react-countup)
@@ -11,18 +10,30 @@ [![Coverage Status](https://coveralls.io/repos/github/glennreyes/react-countup/badge.svg?branch=master)](https://coveralls.io/github/glennreyes/react-countup?branch=master)
 
-A configurable React component wrapper around [CountUp.js](https://inorganik.github.io/countUp.js/) to count up numbers.
+A configurable React component wrapper around [CountUp.js](https://inorganik.github.io/countUp.js/).
 
 ![sep -15-2016 10-11-53 pm](https://cloud.githubusercontent.com/assets/5080854/18565869/d23db0e0-7b91-11e6-9ee2-71be5875ca48.gif)
 
+
 ## [Demo](https://glennreyes.github.io/react-countup)
-Check out the [live demo](https://glennreyes.github.io/react-countup).
 
+Check out the [demo](https://glennreyes.github.io/react-countup).
 
+
 ## Installation
-Make sure you have a compatible version of and `15.x.x` installed in your project.
+
+Make sure you have a compatible version of React `15.x.x` installed in your project.
+
 ```bash
+yarn add react-countup
+```
+
+Alternatively with npm:
+```bash
 npm install react-countup --save
 ```
 
+
 ## Usage
-#### Basic
+
+#### Simple
+
 ```js
@@ -39,2 +50,3 @@ import React from 'react';
 #### Advanced
+
 ```js
@@ -55,8 +67,10 @@ import React from 'react';
   <CountUp
-    className="custom-count"
+    className="account-balance"
     start={160527.0127}
-    end={-875}
+    end={-875.0319}
     duration={2.75}
     useEasing={true}
+    useGrouping={true}
     separator=" "
+    decimals={4}
     decimal=","
@@ -74,11 +88,10 @@ prefix="EUR "
 
-
 ##### `start`: number
-The start number from which the should start from
+Start value
 
 ##### `end`: number
-Target number to count up
+Target value
 
 ##### `duration`: number
-Duration of count up animation in seconds
+Duration in seconds
 
@@ -89,6 +102,6 @@ ##### `decimals`: number
 ##### `useEasing`: boolean
-Use "easeOutExpo" if `true`
+Enable easing if set to `true` (default easing: `easeOutExpo`)
 
 ##### `useGrouping`: boolean
-Group thousands by separator character
+Group thousands by [separator character](#separator-string)
 
@@ -111,18 +124,20 @@ ##### `separator`: string
 ##### `redraw`: boolean
-If `true`, your component will always animate on every re-render.
+If set to `true`, the CountUp component will always animate on every re-render.
 
 ##### `onComplete`: function
-Method called after animation has completed
+Function called after animation has completed
 
 ##### `onStart`: function
-Method called before animation starts
+Function called before animation starts
 
 ##### `easingFn`: function
-Method to customize easing the function. See also [here](https://github.com/inorganik/countUp.js#custom-easing)
+Easing function, see [here for instructions](https://github.com/inorganik/countUp.js#custom-easing)
 
 ##### `formattingFn`: function
-Method to customize the formatting of the number
+Function to customize the formatting of the number
 
-## Advanced Usage
-By default, the animation triggered if any of the follow props has changed:
+
+## Protips
+
+By default, the animation is triggered if any of the following props has changed:
 - `duration`
@@ -134,3 +149,3 @@ - `end`
 
-### Start animation manually
+### Manually start the animation
 
@@ -148,3 +163,3 @@ ```js
       startAnimation(this.myCountUp);
-    }}>Animate me!</button>
+    }}>Count me up!</button>
   </div>
@@ -151,0 +166,0 @@ );

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16524

increased by13.31%

Lines of code

298

increased by26.81%

Number of lines in readme file

165

increased by10%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes