Add initial start value for CountUp component (#580)

* Add initial start value for CountUp component

* Using formattingFn for initial value, fix eslint command

README.md

@@ -367,28 +367,28 @@ export default function App() {
 }
 ```
 
-### Set accessibility properties for occupation period 
+### Set accessibility properties for occupation period
 
 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,
   };
 
   return (

package.json

@@ -25,7 +25,7 @@
   ],
   "typings": "build/index.d.ts",
   "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",
     "prepublishOnly": "yarn build",
     "test": "jest"

src/CountUp.tsx

@@ -1,4 +1,9 @@
-import React, { CSSProperties, ReactNode, ComponentPropsWithoutRef, useEffect } from 'react';
+import React, {
+  CSSProperties,
+  ReactNode,
+  ComponentPropsWithoutRef,
+  useEffect,
+} from 'react';
 import { CallbackProps, CommonProps, RenderCounterProps } from './types';
 import { useEventCallback } from './helpers/useEventCallback';
 import useCountUp from './useCountUp';
@@ -9,11 +14,18 @@ export interface CountUpProps extends CommonProps, CallbackProps {
   children?: (props: RenderCounterProps) => ReactNode;
   style?: CSSProperties;
   preserveValue?: boolean;
-  containerProps?: ComponentPropsWithoutRef<"span">
+  containerProps?: ComponentPropsWithoutRef<'span'>;
 }
 
 const CountUp: React.FC<CountUpProps> = (props) => {
-  const { className, redraw, containerProps, children, style, ...useCountUpProps } = props;
+  const {
+    className,
+    redraw,
+    containerProps,
+    children,
+    style,
+    ...useCountUpProps
+  } = props;
   const containerRef = React.useRef<HTMLElement>(null);
   const isInitializedRef = React.useRef(false);
 
@@ -111,7 +123,16 @@ const CountUp: React.FC<CountUpProps> = (props) => {
     }) as JSX.Element | null;
   }
 
-  return <span className={className} ref={containerRef} style={style} {...containerProps} />;
+  return (
+    <span
+      className={className}
+      ref={containerRef}
+      style={style}
+      {...containerProps}
+    >
+      {props.start ? getCountUp().formattingFn(props.start) : ''}
+    </span>
+  );
 };
 
 export default CountUp;