A simple React Countdown Component
Install using npm:
npm install easy-react-countdown
- Counts down seconds, while also displaying the remaining seconds
- Audible Countdown using the Speechsynthesis browser API
- Using webworkers to make sure the countdown actually runs every second, also on chrome when the tab is not focused
Create a 5 second countdown:
import React from 'react';
import Countdown from 'easy-react-countdown';
function App() {
return (
<div className="App">
<Countdown targetDate={new Date(Date.now() + 5300)}/>
</div>
);
}
export default App;
default null a Date object indicating the time until which the countdown shall run. Set to null to deactivate the countdown
default null a function to be executed when the countdown runs out.
default
JSX that will be displayed before the countdown is started (when the countdown is initialized with targetDate null)default "0" String to be read at the end of the countdown (at 0)
default -1 int indicating from which number the loud text-to-speech countdown starts. -1 for always count loudly.
The component counts down in full seconds from when it starts the webworker, so unless this happens at the same milliseconds as the targetDate which is very unlikely, the countdown will not be exact to the milliseconds. Maybe I'll try improving this in the future, but no guarantee
In Chrome the Speechsynthesis API used for the Text-to-speech does not work without user interaction. But for example if you have a button to start the countdown it should work. If you know any workarounds I'd be interested, otherwise this will probably stay this way.