react-countup - npm Package Compare versions

Comparing version 6.0.0 to 6.1.0

build/CountUp.d.ts

@@ -9,5 +9,5 @@ import React, { CSSProperties, ReactNode, ComponentPropsWithoutRef } from 'react';
     preserveValue?: boolean;
-    containerProps?: ComponentPropsWithoutRef<"span">;
+    containerProps?: ComponentPropsWithoutRef<'span'>;
 }
 declare const CountUp: React.FC<CountUpProps>;
 export default CountUp;

build/index.d.ts

 export { default } from './CountUp';
+export type { CountUpProps } from './CountUp';
 export { default as useCountUp } from './useCountUp';

build/index.js

@@ -317,4 +317,4 @@ 'use strict';
 
-  var containerRef = React__default['default'].useRef(null);
-  var isInitializedRef = React__default['default'].useRef(false);
+  var containerRef = React__default["default"].useRef(null);
+  var isInitializedRef = React__default["default"].useRef(false);
 
@@ -392,10 +392,10 @@ var _useCountUp = useCountUp(_objectSpread2(_objectSpread2({}, useCountUpProps), {}, {
 
-  return /*#__PURE__*/React__default['default'].createElement("span", _extends({
+  return /*#__PURE__*/React__default["default"].createElement("span", _extends({
     className: className,
     ref: containerRef,
     style: style
-  }, containerProps));
+  }, containerProps), props.start ? getCountUp().formattingFn(props.start) : '');
 };
 
-exports['default'] = CountUp;
+exports["default"] = CountUp;
 exports.useCountUp = useCountUp;

package.json

 {
   "name": "react-countup",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "description": "A React component wrapper around CountUp.js",
@@ -28,3 +28,3 @@ "author": "Glenn Reyes <[e-mail]> (https://twitter.com/glnnrys)",
   "scripts": {
-    "format": "prettier --write \"*.md\" \"src/**/*.ts\"",
+    "format": "prettier --write \"*.md\" \"src/**/*.ts\"  \"src/**/*.tsx\"",
     "build": "rollup -c && tsc --emitDeclarationOnly --noEmit false --project src/tsconfig.json --outDir build",
@@ -41,8 +41,8 @@ "prepublishOnly": "yarn build",
   "devDependencies": {
-    "@babel/core": "7.15.0",
-    "@babel/preset-env": "7.15.0",
-    "@babel/preset-react": "7.14.5",
+    "@babel/core": "7.15.5",
+    "@babel/preset-env": "7.16.0",
+    "@babel/preset-react": "7.16.0",
     "@babel/preset-typescript": "^7.14.5",
     "@rollup/plugin-node-resolve": "^13.0.4",
-    "@testing-library/react": "12.0.0",
+    "@testing-library/react": "12.1.2",
     "@testing-library/react-hooks": "7.0.2",
@@ -52,3 +52,3 @@ "@types/warning": "^3.0.0",
     "@typescript-eslint/parser": "^4.29.1",
-    "babel-jest": "27.1.0",
+    "babel-jest": "27.3.1",
     "eslint": "^7.32.0",
@@ -59,4 +59,4 @@ "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "jest": "27.1.0",
-    "prettier": "2.3.2",
+    "jest": "27.3.1",
+    "prettier": "2.4.1",
     "pretty-quick": "3.1.1",
@@ -67,3 +67,3 @@ "raf": "3.4.1",
     "react-test-renderer": "17.0.2",
-    "rollup": "2.56.3",
+    "rollup": "2.59.0",
     "rollup-plugin-babel": "4.4.0",
@@ -70,0 +70,0 @@ "typescript": "^4.3.5"

README.md

@@ -14,5 +14,7 @@ # [React CountUp](https://tr8tk.csb.app/)
 
-### Looking for v3.x docs?
+### Previous docs
 
-Click [here](https://github.com/glennreyes/react-countup/tree/d0002932dac8a274f951e53b1d9b1f4719176147) to get to the previous docs.
+- [v3.x](https://github.com/glennreyes/react-countup/tree/d0002932dac8a274f951e53b1d9b1f4719176147)
+- [v4.x](https://github.com/glennreyes/react-countup/tree/afd39ca66a317271ad3135b0a924b86e2982f207)
+- [v5.x](https://github.com/glennreyes/react-countup/tree/ae4586c9f502fba726ff2d24d215c88d8f4879d7)
 
@@ -218,3 +220,3 @@ ![react-countup](https://user-images.githubusercontent.com/5080854/43985960-0a7fb776-9d0c-11e8-8082-975b1e8bf51c.gif)
 
-#### `delay: ?number`
+#### `delay: number`
 
@@ -287,4 +289,6 @@ Delay in seconds before starting the transition.
 
-Function to customize the formatting of the number
+Function to customize the formatting of the number.
 
+To prevent component from unnecessary updates this function should be memoized with [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback)
+
 #### `onEnd: ({ pauseResume, reset, start, update }) => void`
@@ -371,3 +375,3 @@
 
-### Set accessibility properties for occupation period 
+### Set accessibility properties for occupation period
 
@@ -377,19 +381,19 @@ You can use callback properties to control accessibility:
 ```js
-import React from "react";
-import CountUp, { useCountUp } from "react-countup";
+import React from 'react';
+import CountUp, { useCountUp } from 'react-countup';
 
 export default function App() {
-  useCountUp({ ref: "counter", end: 10, duration: 2 });
+  useCountUp({ ref: 'counter', end: 10, duration: 2 });
   const [loading, setLoading] = React.useState(false);
-  
+
   const onStart = () => {
     setLoading(true);
   };
-  
+
   const onEnd = () => {
     setLoading(false);
   };
-  
+
   const containerProps = {
-    "aria-busy": loading
+    'aria-busy': loading,
   };
@@ -396,0 +400,0 @@

No alert changes

Improved metrics

Total package byte prevSize

29319

increased by1.5%

Lines of code

458

increased by0.22%

Number of lines in readme file

414

increased by0.98%

No dependency changes