React Countdown

A reusable React component to abstract away the countdown logic so you can focus on the layout.

Installing

Install via yarn

    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>;

Development

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.

TODO

• basic unit tests
• babel 7
• fix initial render flash
• use lint staged to create dist?
• clearly define API
• simplify
• days and years