react-countup - npm Package Compare versions

Comparing version 5.2.0 to 6.0.0-0

build/common.d.ts

 import { CountUp } from 'countup.js';
-import { CountUpProps } from './CountUp';
-import { useCountUpProps } from './useCountUp';
-export declare const DEFAULTS: {
-    decimal: string;
-    delay: null;
-    prefix: string;
-    suffix: string;
-    start: number;
-};
-export declare const createCountUpInstance: (el: string | HTMLElement | HTMLInputElement, props: useCountUpProps | CountUpProps) => CountUp;
+import { CountUpInstanceProps } from './types';
+export declare const createCountUpInstance: (el: string | HTMLElement, props: CountUpInstanceProps) => CountUp;

build/CountUp.d.ts

@@ -1,3 +0,2 @@
-import React, { Component, CSSProperties } from 'react';
-import { CountUp as CountUpJs } from 'countup.js';
+import React, { CSSProperties } from 'react';
 import { CallbackProps, CommonProps, RenderCounterProps } from './types';
@@ -7,33 +6,7 @@ export interface CountUpProps extends CommonProps, CallbackProps {
     redraw?: boolean;
-    preserveValue?: boolean;
     children?: (props: RenderCounterProps) => React.ReactNode;
     style?: CSSProperties;
+    preserveValue?: boolean;
 }
-declare class CountUp extends Component<CountUpProps> {
-    private instance;
-    private timeoutId;
-    static defaultProps: {
-        redraw: boolean;
-        style: undefined;
-        preserveValue: boolean;
-        decimal: string;
-        delay: null;
-        prefix: string;
-        suffix: string;
-        start: number;
-    };
-    componentDidMount(): void;
-    checkProps: (updatedProps: CountUpProps) => boolean | undefined;
-    shouldComponentUpdate(nextProps: CountUpProps): boolean;
-    componentDidUpdate(prevProps: CountUpProps): void;
-    componentWillUnmount(): void;
-    createInstance: () => CountUpJs | undefined;
-    pauseResume: () => void;
-    reset: () => void;
-    restart: () => void;
-    start: () => void;
-    update: (newEnd: string | number) => void;
-    containerRef: React.RefObject<any>;
-    render(): React.ReactNode;
-}
+declare const CountUp: React.FC<CountUpProps>;
 export default CountUp;

build/index.js

@@ -50,24 +50,2 @@ 'use strict';
 
-function _classCallCheck(instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a 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);
-  }
-}
-
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  return Constructor;
-}
-
 function _defineProperty(obj, key, value) {
@@ -88,88 +66,70 @@ if (key in obj) {
 
-function _inherits(subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function");
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
   }
 
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) _setPrototypeOf(subClass, superClass);
+  return target;
 }
 
-function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
-    return o.__proto__ || Object.getPrototypeOf(o);
-  };
-  return _getPrototypeOf(o);
-}
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
 
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
+  var target = _objectWithoutPropertiesLoose(source, excluded);
 
-  return _setPrototypeOf(o, p);
-}
+  var key, i;
 
-function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-  if (Reflect.construct.sham) return false;
-  if (typeof Proxy === "function") return true;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
 
-  try {
-    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
-    return true;
-  } catch (e) {
-    return false;
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
   }
-}
 
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
+  return target;
 }
 
-function _possibleConstructorReturn(self, call) {
-  if (call && (typeof call === "object" || typeof call === "function")) {
-    return call;
-  }
+/**
+ * Silence SSR Warnings.
+ * Borrowed from Formik v2.1.1, Licensed MIT.
+ *
+ * https://github.com/formium/formik/blob/9316a864478f8fcd4fa99a0735b1d37afdf507dc/LICENSE
+ */
 
-  return _assertThisInitialized(self);
-}
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
-function _createSuper(Derived) {
-  var hasNativeReflectConstruct = _isNativeReflectConstruct();
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * Create a stable reference to a callback which is updated after each render is committed.
+ * Typed version borrowed from Formik v2.2.1. Licensed MIT.
+ *
+ * https://github.com/formium/formik/blob/9316a864478f8fcd4fa99a0735b1d37afdf507dc/LICENSE
+ */
 
-  return function _createSuperInternal() {
-    var Super = _getPrototypeOf(Derived),
-        result;
+function useEventCallback(fn) {
+  var ref = React.useRef(fn); // we copy a ref to the callback scoped to the current state/props on each render
 
-    if (hasNativeReflectConstruct) {
-      var NewTarget = _getPrototypeOf(this).constructor;
-
-      result = Reflect.construct(Super, arguments, NewTarget);
-    } else {
-      result = Super.apply(this, arguments);
+  useIsomorphicLayoutEffect(function () {
+    ref.current = fn;
+  });
+  return React.useCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
 
-    return _possibleConstructorReturn(this, result);
-  };
+    return ref.current.apply(void 0, args);
+  }, []);
 }
 
-var DEFAULTS = {
-  decimal: '.',
-  delay: null,
-  prefix: '',
-  suffix: '',
-  start: 0
-};
 var createCountUpInstance = function createCountUpInstance(el, props) {
@@ -204,269 +164,36 @@ var decimal = props.decimal,
 
-var CountUp = /*#__PURE__*/function (_Component) {
-  _inherits(CountUp, _Component);
+var _excluded$1 = ["ref", "startOnMount", "enableReinitialize", "delay", "onEnd", "onStart", "onPauseResume", "onReset", "onUpdate"];
+var DEFAULTS = {
+  decimal: '.',
+  delay: null,
+  prefix: '',
+  suffix: '',
+  start: 0,
+  startOnMount: true,
+  enableReinitialize: true
+};
 
-  var _super = _createSuper(CountUp);
-
-  function CountUp() {
-    var _this;
-
-    _classCallCheck(this, CountUp);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "instance", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "timeoutId", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "checkProps", function (updatedProps) {
-      var _this$props = _this.props,
-          start = _this$props.start,
-          suffix = _this$props.suffix,
-          prefix = _this$props.prefix,
-          redraw = _this$props.redraw,
-          duration = _this$props.duration,
-          separator = _this$props.separator,
-          decimals = _this$props.decimals,
-          decimal = _this$props.decimal,
-          className = _this$props.className,
-          formattingFn = _this$props.formattingFn;
-      var hasPropsChanged = duration !== updatedProps.duration || start !== updatedProps.start || suffix !== updatedProps.suffix || prefix !== updatedProps.prefix || separator !== updatedProps.separator || decimals !== updatedProps.decimals || decimal !== updatedProps.decimal || className !== updatedProps.className || formattingFn !== updatedProps.formattingFn;
-      return hasPropsChanged || redraw;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "createInstance", function () {
-      if (typeof _this.props.children === 'function') {
-        // Warn when user didn't use containerRef at all
-        if (!(_this.containerRef.current instanceof Element)) {
-          console.error("Couldn't find attached element to hook the CountUp instance into! Try to attach \"containerRef\" from the render prop to a an Element, eg. <span ref={containerRef} />.");
-          return;
-        }
-      }
-
-      return createCountUpInstance(_this.containerRef.current, _this.props);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "pauseResume", function () {
-      var _this$instance;
-
-      var _assertThisInitialize = _assertThisInitialized(_this),
-          reset = _assertThisInitialize.reset,
-          start = _assertThisInitialize.restart,
-          update = _assertThisInitialize.update;
-
-      var onPauseResume = _this.props.onPauseResume;
-      (_this$instance = _this.instance) === null || _this$instance === void 0 ? void 0 : _this$instance.pauseResume();
-      onPauseResume === null || onPauseResume === void 0 ? void 0 : onPauseResume({
-        reset: reset,
-        start: start,
-        update: update
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "reset", function () {
-      var _this$instance2;
-
-      var _assertThisInitialize2 = _assertThisInitialized(_this),
-          pauseResume = _assertThisInitialize2.pauseResume,
-          start = _assertThisInitialize2.restart,
-          update = _assertThisInitialize2.update;
-
-      var onReset = _this.props.onReset;
-      (_this$instance2 = _this.instance) === null || _this$instance2 === void 0 ? void 0 : _this$instance2.reset();
-      onReset === null || onReset === void 0 ? void 0 : onReset({
-        pauseResume: pauseResume,
-        start: start,
-        update: update
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "restart", function () {
-      _this.reset();
-
-      _this.start();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "start", function () {
-      var _assertThisInitialize3 = _assertThisInitialized(_this),
-          pauseResume = _assertThisInitialize3.pauseResume,
-          reset = _assertThisInitialize3.reset,
-          start = _assertThisInitialize3.restart,
-          update = _assertThisInitialize3.update;
-
-      var _this$props2 = _this.props,
-          delay = _this$props2.delay,
-          onEnd = _this$props2.onEnd,
-          onStart = _this$props2.onStart;
-
-      var run = function run() {
-        var _this$instance3;
-
-        return (_this$instance3 = _this.instance) === null || _this$instance3 === void 0 ? void 0 : _this$instance3.start(function () {
-          return onEnd === null || onEnd === void 0 ? void 0 : onEnd({
-            pauseResume: pauseResume,
-            reset: reset,
-            start: start,
-            update: update
-          });
-        });
-      }; // Delay start if delay prop is properly set
-
-
-      if (delay && delay > 0) {
-        _this.timeoutId = setTimeout(run, delay * 1000);
-      } else {
-        run();
-      }
-
-      onStart === null || onStart === void 0 ? void 0 : onStart({
-        pauseResume: pauseResume,
-        reset: reset,
-        update: update
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "update", function (newEnd) {
-      var _this$instance4;
-
-      var _assertThisInitialize4 = _assertThisInitialized(_this),
-          pauseResume = _assertThisInitialize4.pauseResume,
-          reset = _assertThisInitialize4.reset,
-          start = _assertThisInitialize4.restart;
-
-      var onUpdate = _this.props.onUpdate;
-      (_this$instance4 = _this.instance) === null || _this$instance4 === void 0 ? void 0 : _this$instance4.update(newEnd);
-      onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate({
-        pauseResume: pauseResume,
-        reset: reset,
-        start: start
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "containerRef", /*#__PURE__*/React__default['default'].createRef());
-
-    return _this;
-  }
-
-  _createClass(CountUp, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$props3 = this.props,
-          children = _this$props3.children,
-          delay = _this$props3.delay;
-      this.instance = this.createInstance(); // Don't invoke start if component is used as a render prop
-
-      if (typeof children === 'function' && delay !== 0) return; // Otherwise just start immediately
-
-      this.start();
-    }
-  }, {
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps) {
-      var end = this.props.end;
-      return this.checkProps(nextProps) || end !== nextProps.end;
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      // If duration, suffix, prefix, separator or start has changed
-      // there's no way to update the values.
-      // So we need to re-create the CountUp instance in order to
-      // restart it.
-      var _this$props4 = this.props,
-          end = _this$props4.end,
-          preserveValue = _this$props4.preserveValue;
-
-      if (this.checkProps(prevProps)) {
-        var _this$instance5;
-
-        (_this$instance5 = this.instance) === null || _this$instance5 === void 0 ? void 0 : _this$instance5.reset();
-        this.instance = this.createInstance();
-        this.start();
-      } // Only end value has changed, so reset and and re-animate with the updated
-      // end value.
-
-
-      if (end !== prevProps.end) {
-        var _this$instance7;
-
-        if (!preserveValue) {
-          var _this$instance6;
-
-          (_this$instance6 = this.instance) === null || _this$instance6 === void 0 ? void 0 : _this$instance6.reset();
-        }
-
-        (_this$instance7 = this.instance) === null || _this$instance7 === void 0 ? void 0 : _this$instance7.update(end);
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      var _this$instance8;
-
-      if (this.timeoutId) {
-        clearTimeout(this.timeoutId);
-      }
-
-      (_this$instance8 = this.instance) === null || _this$instance8 === void 0 ? void 0 : _this$instance8.reset();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props5 = this.props,
-          children = _this$props5.children,
-          className = _this$props5.className,
-          style = _this$props5.style;
-      var containerRef = this.containerRef,
-          pauseResume = this.pauseResume,
-          reset = this.reset,
-          restart = this.restart,
-          update = this.update;
-
-      if (typeof children === 'function') {
-        return children({
-          countUpRef: containerRef,
-          pauseResume: pauseResume,
-          reset: reset,
-          start: restart,
-          update: update
-        });
-      }
-
-      return /*#__PURE__*/React__default['default'].createElement("span", {
-        className: className,
-        ref: containerRef,
-        style: style
-      });
-    }
-  }]);
-
-  return CountUp;
-}(React.Component);
-
-_defineProperty(CountUp, "defaultProps", _objectSpread2(_objectSpread2({}, DEFAULTS), {}, {
-  redraw: false,
-  style: undefined,
-  preserveValue: false
-}));
-
-var defaults = _objectSpread2(_objectSpread2({}, DEFAULTS), {}, {
-  startOnMount: true
-});
-
 var useCountUp = function useCountUp(props) {
-  var parsedProps = _objectSpread2(_objectSpread2({}, defaults), props);
+  var _useMemo = React.useMemo(function () {
+    return _objectSpread2(_objectSpread2({}, DEFAULTS), props);
+  }, [props]),
+      ref = _useMemo.ref,
+      startOnMount = _useMemo.startOnMount,
+      enableReinitialize = _useMemo.enableReinitialize,
+      delay = _useMemo.delay,
+      onEnd = _useMemo.onEnd,
+      onStart = _useMemo.onStart,
+      onPauseResume = _useMemo.onPauseResume,
+      onReset = _useMemo.onReset,
+      onUpdate = _useMemo.onUpdate,
+      instanceProps = _objectWithoutProperties(_useMemo, _excluded$1);
 
-  var ref = parsedProps.ref;
   var countUpRef = React.useRef();
   var timerRef = React.useRef();
-
-  var createInstance = function createInstance() {
-    return createCountUpInstance(typeof ref === 'string' ? ref : ref.current, parsedProps);
-  };
-
-  var getCountUp = function getCountUp(recreate) {
+  var isInitializedRef = React.useRef(false);
+  var createInstance = useEventCallback(function () {
+    return createCountUpInstance( // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    typeof ref === 'string' ? ref : ref.current, instanceProps);
+  });
+  var getCountUp = useEventCallback(function (recreate) {
     var countUp = countUpRef.current;
@@ -481,18 +208,21 @@
     return newCountUp;
-  };
+  });
+  var start = useEventCallback(function () {
+    var run = function run() {
+      return getCountUp(true).start(function () {
+        onEnd === null || onEnd === void 0 ? void 0 : onEnd({
+          pauseResume: pauseResume,
+          reset: reset,
+          start: restart,
+          update: update
+        });
+      });
+    };
 
-  var reset = function reset() {
-    var onReset = parsedProps.onReset;
-    getCountUp().reset();
-    onReset === null || onReset === void 0 ? void 0 : onReset({
-      pauseResume: pauseResume,
-      start: restart,
-      update: update
-    });
-  };
+    if (delay && delay > 0) {
+      timerRef.current = setTimeout(run, delay * 1000);
+    } else {
+      run();
+    }
 
-  var restart = function restart() {
-    var onStart = parsedProps.onStart,
-        onEnd = parsedProps.onEnd;
-    getCountUp().reset();
     onStart === null || onStart === void 0 ? void 0 : onStart({
@@ -503,14 +233,4 @@ pauseResume: pauseResume,
     });
-    getCountUp().start(function () {
-      onEnd === null || onEnd === void 0 ? void 0 : onEnd({
-        pauseResume: pauseResume,
-        reset: reset,
-        start: restart,
-        update: update
-      });
-    });
-  };
-
-  var pauseResume = function pauseResume() {
-    var onPauseResume = parsedProps.onPauseResume;
+  });
+  var pauseResume = useEventCallback(function () {
     getCountUp().pauseResume();
@@ -522,6 +242,13 @@ onPauseResume === null || onPauseResume === void 0 ? void 0 : onPauseResume({
     });
-  };
-
-  var update = function update(newEnd) {
-    var onUpdate = parsedProps.onUpdate;
+  });
+  var reset = useEventCallback(function () {
+    timerRef.current && clearTimeout(timerRef.current);
+    getCountUp().reset();
+    onReset === null || onReset === void 0 ? void 0 : onReset({
+      pauseResume: pauseResume,
+      start: restart,
+      update: update
+    });
+  });
+  var update = useEventCallback(function (newEnd) {
     getCountUp().update(newEnd);
@@ -533,34 +260,31 @@ onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate({
     });
-  };
-
-  React.useEffect(function () {
-    var delay = parsedProps.delay,
-        onStart = parsedProps.onStart,
-        onEnd = parsedProps.onEnd,
-        startOnMount = parsedProps.startOnMount;
-
+  });
+  var restart = useEventCallback(function () {
+    reset();
+    start();
+  });
+  var maybeInitialize = useEventCallback(function () {
     if (startOnMount) {
-      timerRef.current = setTimeout(function () {
-        onStart === null || onStart === void 0 ? void 0 : onStart({
-          pauseResume: pauseResume,
-          reset: reset,
-          update: update
-        });
-        getCountUp(true).start(function () {
-          timerRef.current && clearTimeout(timerRef.current);
-          onEnd === null || onEnd === void 0 ? void 0 : onEnd({
-            pauseResume: pauseResume,
-            reset: reset,
-            start: restart,
-            update: update
-          });
-        });
-      }, delay ? delay * 1000 : 0);
+      start();
     }
-
+  });
+  var maybeReinitialize = useEventCallback(function () {
+    if (startOnMount) {
+      reset();
+      start();
+    }
+  });
+  React.useEffect(function () {
+    if (!isInitializedRef.current) {
+      isInitializedRef.current = true;
+      maybeInitialize();
+    } else if (enableReinitialize) {
+      maybeReinitialize();
+    }
+  }, [enableReinitialize, isInitializedRef, maybeInitialize, maybeReinitialize, props]);
+  React.useEffect(function () {
     return function () {
-      timerRef.current && clearTimeout(timerRef.current);
       reset();
     };
-  }, [parsedProps]);
+  }, [reset]);
   return {
@@ -570,7 +294,98 @@ start: restart,
     reset: reset,
-    update: update
+    update: update,
+    getCountUp: getCountUp
   };
 };
 
+var _excluded = ["className", "redraw", "children", "style"];
+
+var CountUp = function CountUp(props) {
+  var className = props.className,
+      redraw = props.redraw,
+      children = props.children,
+      style = props.style,
+      useCountUpProps = _objectWithoutProperties(props, _excluded);
+
+  var containerRef = React__default['default'].useRef(null);
+  var isInitializedRef = React__default['default'].useRef(false);
+
+  var _useCountUp = useCountUp(_objectSpread2(_objectSpread2({}, useCountUpProps), {}, {
+    ref: containerRef,
+    startOnMount: typeof children !== 'function' || props.delay === 0,
+    // component manually restarts
+    enableReinitialize: false
+  })),
+      start = _useCountUp.start,
+      reset = _useCountUp.reset,
+      updateCountUp = _useCountUp.update,
+      pauseResume = _useCountUp.pauseResume,
+      getCountUp = _useCountUp.getCountUp;
+
+  var restart = useEventCallback(function () {
+    start();
+  });
+  var update = useEventCallback(function (end) {
+    if (!props.preserveValue) {
+      reset();
+    }
+
+    updateCountUp(end);
+  });
+  var initializeOnMount = useEventCallback(function () {
+    if (typeof props.children === 'function') {
+      // Warn when user didn't use containerRef at all
+      if (!(containerRef.current instanceof Element)) {
+        console.error("Couldn't find attached element to hook the CountUp instance into! Try to attach \"containerRef\" from the render prop to a an Element, eg. <span ref={containerRef} />.");
+        return;
+      }
+    } // unlike the hook, the CountUp component initializes on mount
+
+
+    getCountUp();
+  });
+  React.useEffect(function () {
+    initializeOnMount();
+  }, [initializeOnMount]);
+  React.useEffect(function () {
+    if (isInitializedRef.current) {
+      update(props.end);
+    }
+  }, [props.end, update]);
+  var redrawDependencies = redraw && props; // if props.redraw, call this effect on every props change
+
+  React.useEffect(function () {
+    if (redraw && isInitializedRef.current) {
+      restart();
+    }
+  }, [restart, redraw, redrawDependencies]); // if not props.redraw, call this effect only when certain props are changed
+
+  React.useEffect(function () {
+    if (!props.redraw && isInitializedRef.current) {
+      restart();
+    }
+  }, [restart, props.redraw, props.start, props.suffix, props.prefix, props.duration, props.separator, props.decimals, props.decimal, props.className, props.formattingFn]);
+  React.useEffect(function () {
+    isInitializedRef.current = true;
+  }, []);
+
+  if (typeof children === 'function') {
+    // TypeScript forces functional components to return JSX.Element | null.
+    return children({
+      countUpRef: containerRef,
+      start: start,
+      reset: reset,
+      update: updateCountUp,
+      pauseResume: pauseResume,
+      getCountUp: getCountUp
+    });
+  }
+
+  return /*#__PURE__*/React__default['default'].createElement("span", {
+    className: className,
+    ref: containerRef,
+    style: style
+  });
+};
+
 exports['default'] = CountUp;
 exports.useCountUp = useCountUp;

build/types.d.ts

 import * as React from 'react';
-declare type Function = () => void;
+import { CountUp as CountUpJs } from 'countup.js';
+declare type VoidFn = () => void;
 export declare type UpdateFn = (newEnd: string | number) => void;
+export declare type GetCountUpFn = (recreate?: boolean) => CountUpJs;
+export interface CountUpApi {
+    start: VoidFn;
+    pauseResume: VoidFn;
+    reset: VoidFn;
+    update: UpdateFn;
+    getCountUp: GetCountUpFn;
+}
 export interface OnEndArgs {
-    pauseResume: Function;
-    reset: Function;
-    start: Function;
+    pauseResume: VoidFn;
+    reset: VoidFn;
+    start: VoidFn;
     update: UpdateFn;
@@ -12,4 +21,4 @@ }
 export interface OnStartArgs {
-    pauseResume: Function;
-    reset: Function;
+    pauseResume: VoidFn;
+    reset: VoidFn;
     update: UpdateFn;
@@ -19,4 +28,4 @@ }
 export interface OnPauseResumeArgs {
-    reset: Function;
-    start: Function;
+    reset: VoidFn;
+    start: VoidFn;
     update: UpdateFn;
@@ -26,4 +35,4 @@ }
 export interface OnResetArgs {
-    pauseResume: Function;
-    start: Function;
+    pauseResume: VoidFn;
+    start: VoidFn;
     update: UpdateFn;
@@ -33,12 +42,11 @@ }
 export interface OnUpdateArgs {
-    pauseResume: Function;
-    reset: Function;
-    start: Function;
+    pauseResume: VoidFn;
+    reset: VoidFn;
+    start: VoidFn;
 }
 export declare type OnUpdateCallback = (args: OnUpdateArgs) => void;
 declare type EasingFn = (t: number, b: number, c: number, d: number) => number;
-export interface CommonProps {
+export interface CountUpInstanceProps {
     decimal?: string;
     decimals?: number;
-    delay?: number | null;
     duration?: number;
@@ -55,2 +63,5 @@ easingFn?: EasingFn;
 }
+export interface CommonProps extends CountUpInstanceProps {
+    delay?: number | null;
+}
 export interface CallbackProps {
@@ -63,9 +74,5 @@ onEnd?: OnEndCallback;
 }
-export interface RenderCounterProps {
-    countUpRef: React.RefObject<any>;
-    start: Function;
-    pauseResume: Function;
-    reset: Function;
-    update: UpdateFn;
+export interface RenderCounterProps extends CountUpApi {
+    countUpRef: React.RefObject<HTMLElement>;
 }
 export {};

build/useCountUp.d.ts

@@ -1,13 +0,9 @@
-import { CallbackProps, CommonProps, UpdateFn } from './types';
-import React from 'react';
+/// <reference types="react" />
+import { CallbackProps, CommonProps, CountUpApi } from './types';
 export interface useCountUpProps extends CommonProps, CallbackProps {
     startOnMount?: boolean;
-    ref: string | React.RefObject<any>;
+    ref: string | React.RefObject<HTMLElement>;
+    enableReinitialize?: boolean;
 }
-declare const useCountUp: (props: useCountUpProps) => {
-    start: () => void;
-    pauseResume: () => void;
-    reset: () => void;
-    update: UpdateFn;
-};
+declare const useCountUp: (props: useCountUpProps) => CountUpApi;
 export default useCountUp;

package.json

 {
   "name": "react-countup",
-  "version": "5.2.0",
+  "version": "6.0.0-0",
   "description": "A React component wrapper around CountUp.js",
@@ -40,3 +40,2 @@ "author": "Glenn Reyes <[e-mail]> (https://twitter.com/glnnrys)",
     "@babel/core": "7.14.8",
-    "@babel/plugin-proposal-class-properties": "7.14.5",
     "@babel/preset-env": "7.14.8",
@@ -49,3 +48,10 @@ "@babel/preset-react": "7.14.5",
     "@types/warning": "^3.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.29.1",
+    "@typescript-eslint/parser": "^4.29.1",
     "babel-jest": "27.0.6",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "27.0.6",
@@ -58,3 +64,3 @@ "prettier": "2.3.2",
     "react-test-renderer": "17.0.2",
-    "rollup": "2.55.0",
+    "rollup": "2.55.1",
     "rollup-plugin-babel": "4.4.0",
@@ -61,0 +67,0 @@ "typescript": "^4.3.5"

README.md

@@ -156,4 +156,4 @@ # [React CountUp](https://tr8tk.csb.app/)
 const SimpleHook = () => {
-  useCountUp({ ref: "counter", end: 1234567 });
-  return <span id="counter"/>;
+  useCountUp({ ref: 'counter', end: 1234567 });
+  return <span id="counter" />;
 };
@@ -183,3 +183,3 @@ ```
     <div>
-      <div ref={countUpRef}/>
+      <div ref={countUpRef} />
       <button onClick={start}>Start</button>
@@ -345,6 +345,6 @@ <button onClick={reset}>Reset</button>
 ```js
-import React from "react";
-import CountUp from "react-countup";
-import VisibilitySensor from "react-visibility-sensor";
-import "./styles.css";
+import React from 'react';
+import CountUp from 'react-countup';
+import VisibilitySensor from 'react-visibility-sensor';
+import './styles.css';
 
@@ -351,0 +351,0 @@ export default function App() {

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of package files

11

increased by22.22%

Worsened metrics

Total package byte prevSize

27348

decreased by-18.08%

Dev dependency count

26

increased by30%

Lines of code

445

decreased by-26.08%

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes