Add ability to set CountUp span props (#548)

demo/package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "prop-types": "^15.6.2",
     "react": "^17.0.2",
-    "react-countup": "^5.1.0",
+    "react-countup": "^6.0.0-2",
     "react-dom": "^17.0.2",
     "react-feather": "^2.0.9",
     "react-github-corner": "^2.5.0",

demo/src/App.js

@@ -135,8 +135,19 @@ const Subtitle = styled.h2`
 const Text = styled.p``;
 const Title = styled.h1``;
 
-const simple = `
-<CountUp end={123457} />
+const simple = `<CountUp end={123457} />`;
+
+const accessibility = `
+() => {
+  const [loading, setLoading] = React.useState(false);
+  const onStart = () => {setLoading(true)};
+  const onEnd = () => {setLoading(false)};
+  const containerProps = {
+    'aria-busy': loading
+  };
+  
+  return <CountUp end={123457} duration="3" onStart={onStart} onEnd={onEnd} containerProps={containerProps} />
+}
 `;
 
 const renderProp = `
@@ -232,6 +243,7 @@ const App = () => (
     <Example code={simple} title="Simple">
       <Text>Edit the code to see live changes.</Text>
     </Example>
+    <Example code={accessibility} title="Accessibility" />
     <Example code={renderProp} title="Render prop" />
     <Example code={manualStart} title="Manually start with render prop" />
     <Example code={autoStart} title="Autostart with render prop" />

src/CountUp.tsx

@@ -1,18 +1,19 @@
-import React, { CSSProperties, 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';
 
 export interface CountUpProps extends CommonProps, CallbackProps {
   className?: string;
   redraw?: boolean;
-  children?: (props: RenderCounterProps) => React.ReactNode;
+  children?: (props: RenderCounterProps) => ReactNode;
   style?: CSSProperties;
   preserveValue?: boolean;
+  containerProps?: ComponentPropsWithoutRef<"span">
 }
 
 const CountUp: React.FC<CountUpProps> = (props) => {
-  const { className, redraw, children, style, ...useCountUpProps } = props;
+  const { className, redraw, containerProps, children, style, ...useCountUpProps } = props;
   const containerRef = React.useRef<HTMLElement>(null);
   const isInitializedRef = React.useRef(false);
 
@@ -77,12 +78,12 @@ const CountUp: React.FC<CountUpProps> = (props) => {
 
   // if not props.redraw, call this effect only when certain props are changed
   useEffect(() => {
-    if (!props.redraw && isInitializedRef.current) {
+    if (!redraw && isInitializedRef.current) {
       restart();
     }
   }, [
     restart,
-    props.redraw,
+    redraw,
     props.start,
     props.suffix,
     props.prefix,
@@ -110,7 +111,7 @@ const CountUp: React.FC<CountUpProps> = (props) => {
     }) as JSX.Element | null;
   }
 
-  return <span className={className} ref={containerRef} style={style} />;
+  return <span className={className} ref={containerRef} style={style} {...containerProps} />;
 };
 
 export default CountUp;