A reusable React component to abstract away the countdown logic so you can focus on the layout.
yarn add jackkav/react-countdown
Use the React render props pattern, design your own layout
In the following example, spline is the random loading text.
import { Countdown } from "@jackkav/react-countdown";
let thirtyMins = new Date();
thirtyMins = new Date(thirtyMins.setMinutes(thirtyMins.getMinutes() + 30));
<Countdown date={thirtyMins}>
{({ timeLeft, hasStopped }) => (
<div>
{hasStopped ? (
<p>Times up!</p>
) : (
<p>
{timeLeft.hours}:{timeLeft.minutes}:{timeLeft.seconds}
</p>
)}
</div>
)}
</Countdown>;
First you'll need NodeJS, and then you'll need to run yarn
.
yarn build:watch
This will watch for changes and build the minified script.
- basic unit tests
- babel 7
- fix initial render flash
- use lint staged to create dist?
- clearly define API
- simplify
- days and years