react-use-countdown

React hook for countdown state.

Usage no npm install needed!

<script type="module">
  import reactUseCountdown from 'https://cdn.skypack.dev/react-use-countdown';
</script>

README

react-use-countdown

CircleCI Coverage Status

React Hook for countdown state.

Installation

Using npm:

$ npm install --save react-use-countdown

Using yarn:

$ yarn add react-use-countdown

Since this module uses React's new Hooks feature, to try this out you'll need to install at least version 16.8.0 of react and react-dom:

$ yarn add react@^16.8.0 react-dom@^16.8.0

Usage

import React from 'react';
import parseMs from 'parse-ms';
import useCountdown from 'react-use-countdown';

function Example() {
  const countdown = useCountdown(() => Date.now() + 10000);
  const { seconds } = parseMs(countdown);

  return (
    <p>
      Hooked in {seconds}
    </p>
  );
}

API

useCountdown(
  date: () => Date | string | number,
  options?: {
    intervalTime?: number,
    now?: () => Date | string | number
  }
): number

Receives a function that returns a date and returns the number of milliseconds remaining until that date.

Optionally receives:

  • intervalTime: the milliseconds between ticks, 1000 by default.
  • now: a function that returns the current time as the second argument.

Contributing

Please feel free to submit any issues or pull requests.

License

MIT