Skip to content
React hook exposing a countdown timer with optional expiration reset callbacks
TypeScript HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Security patch - update dependencies (#4) Jul 27, 2019
src
.editorconfig Init use-countdown-timer Mar 24, 2019
.eslintignore
.eslintrc
.gitignore
.prettierrc Init use-countdown-timer Mar 24, 2019
LICENSE
README.md
package-lock.json
package.json
rollup.config.js
tsconfig.json

README.md

use-countdown-timer

React hook exposing a countdown timer with optional expiration and reset callbacks

NPM Bundlephobia JavaScript Style Guide Code Formatting

Install

npm install --save use-countdown-timer

Parameters and Return Types

use-countdown-timer is written in TypeScript and bundles type definitions.

export interface ICountdownTimerParams {
  timer: number;
  interval?: number;
  autostart?: boolean;
  expireImmediate?: boolean;
  onExpire?: () => void;
  onReset?: () => void;
}

export declare type CountdownTimerResults = {
  countdown: number;
  start: () => void;
  reset: () => void;
};

Usage

import * as React from 'react';

import { useCountdownTimer } from 'use-countdown-timer';

const Example = () => {
  const { countdown, start, reset } = useCountdownTimer({ timer: 1000 * 5 });

  return (
    <React.Fragment>
      <div>{countdown}</div>
      <button onClick={reset}>Reset</button>
      <button onClick={start}>Start</button>
    </React.Fragment>
  );
};

Development

Local development involves two parts.

First, install and start the library so that it watches src/ directory and automatically recompiles to dist/ on change.

# clone the repo
git clone https://github.com/LobsterBandit/use-countdown-timer.git

# install dependencies
cd use-countdown-timer/
npm install

# start rollup in watch mode
npm start

Second, install and start the example app that is linked to your local use-countdown-timer version.

# in second terminal window
cd example/
npm install

# start create-react-app dev server
npm start

Now, any changes to src/ in the local use-countdown-timer or to the example app's example/src/ will live-reload the dev server.

License

MIT © LobsterBandit


This hook is created using create-react-hook.

You can’t perform that action at this time.