Remove span and classname prop

src/Countdown.test.tsx

@@ -543,13 +543,13 @@ describe('<Countdown />', () => {
     now.mockReturnValue(countdownDate - 1000);
     jest.advanceTimersByTime(9000);
 
-    expect(wrapper.text()).toMatchInlineSnapshot(`"00:00:00:01"`);
+    expect(wrapper.update().text()).toMatchInlineSnapshot(`"00:00:00:01"`);
 
     // Forward 1s
     now.mockReturnValue(countdownDate);
     jest.advanceTimersByTime(1000);
 
-    expect(wrapper.text()).toMatchInlineSnapshot(`"00:00:00:00"`);
+    expect(wrapper.update().text()).toMatchInlineSnapshot(`"00:00:00:00"`);
     expect(wrapper.state().timeDelta.total).toBe(0);
     expect(wrapper.state().timeDelta.completed).toBe(true);
     expect(api.isCompleted()).toBe(false);
@@ -558,7 +558,7 @@ describe('<Countdown />', () => {
     now.mockReturnValue(countdownDate + 1000);
     jest.advanceTimersByTime(1000);
 
-    expect(wrapper.text()).toMatchInlineSnapshot(`"-00:00:00:01"`);
+    expect(wrapper.update().text()).toMatchInlineSnapshot(`"-00:00:00:01"`);
     expect(wrapper.state().timeDelta.total).toBe(-1000);
     expect(wrapper.state().timeDelta.completed).toBe(true);
     expect(api.isCompleted()).toBe(false);

src/Countdown.tsx

@@ -24,7 +24,6 @@ export default class Countdown extends React.Component<CountdownProps, Countdown
     precision: PropTypes.number,
     autoStart: PropTypes.bool,
     overtime: PropTypes.bool,
-    className: PropTypes.string,
     children: PropTypes.element,
     renderer: PropTypes.func,
     now: PropTypes.func,
@@ -59,7 +58,7 @@ export default class Countdown extends React.Component<CountdownProps, Countdown
   }
 
   render(): React.ReactNode {
-    const { className, overtime, children, renderer } = this.props;
+    const { overtime, children, renderer } = this.props;
     const renderProps = this.countdown.getRenderProps();
 
     if (renderer) {
@@ -72,12 +71,12 @@ export default class Countdown extends React.Component<CountdownProps, Countdown
 
     const { days, hours, minutes, seconds } = renderProps.formatted;
     return (
-      <span className={className}>
+      <>
         {renderProps.total < 0 ? '-' : ''}
         {days}
         {days ? ':' : ''}
         {hours}:{minutes}:{seconds}
-      </span>
+      </>
     );
   }
 }

src/CountdownJs.ts

@@ -15,7 +15,6 @@ export interface CountdownProps extends CountdownTimeDeltaFormatOptions {
   readonly precision?: number;
   readonly autoStart?: boolean;
   readonly overtime?: boolean;
-  readonly className?: string;
   readonly children?: React.ReactElement<unknown>;
   readonly renderer?: CountdownRendererFn;
   readonly now?: () => number;

src/__snapshots__/Countdown.test.tsx.snap

@@ -4,15 +4,13 @@ exports[`<Countdown /> should render a simple countdown 1`] = `
 <Countdown
   date={1482453477527}
 >
-  <span>
-    01
-    :
-    01
-    :
-    01
-    :
-    50
-  </span>
+  01
+  :
+  01
+  :
+  01
+  :
+  50
 </Countdown>
 `;
 
@@ -21,15 +19,13 @@ exports[`<Countdown /> should render and unmount component on countdown end 1`]
   date={1482453477527}
   zeroPadTime={0}
 >
-  <span>
-    1
-    :
-    1
-    :
-    1
-    :
-    50
-  </span>
+  1
+  :
+  1
+  :
+  1
+  :
+  50
 </Countdown>
 `;
 
@@ -38,15 +34,13 @@ exports[`<Countdown /> should render and unmount component on countdown end 2`]
   date={0}
   zeroPadTime={0}
 >
-  <span>
-    1
-    :
-    1
-    :
-    1
-    :
-    50
-  </span>
+  1
+  :
+  1
+  :
+  1
+  :
+  50
 </Countdown>
 `;
 
@@ -69,13 +63,11 @@ exports[`<Countdown /> should render with daysInHours => true 1`] = `
   date={1482453477527}
   daysInHours={true}
 >
-  <span>
-    25
-    :
-    01
-    :
-    50
-  </span>
+  25
+  :
+  01
+  :
+  50
 </Countdown>
 `;
 
@@ -84,15 +76,13 @@ exports[`<Countdown /> should render with zeroPadDays => 3 1`] = `
   date={1483227367071}
   zeroPadDays={3}
 >
-  <span>
-    010
-    :
-    00
-    :
-    00
-    :
-    00
-  </span>
+  010
+  :
+  00
+  :
+  00
+  :
+  00
 </Countdown>
 `;
 
@@ -199,14 +189,12 @@ exports[`<Countdown /> should trigger onTick and onComplete callbacks 1`] = `
     }
   }
 >
-  <span>
-    00
-    :
-    00
-    :
-    00
-    :
-    06
-  </span>
+  00
+  :
+  00
+  :
+  00
+  :
+  06
 </Countdown>
 `;