All Projects → bsonntag → react-use-countdown

bsonntag / react-use-countdown

Licence: MIT license
React hook for countdown state.

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects
CSS
56736 projects

Projects that are alternatives of or similar to react-use-countdown

react-hook-videojs
Easy React integration of Video.js using hooks.
Stars: ✭ 37 (+94.74%)
Mutual labels:  hook, react-hooks
react-hook-layout
Layouts in React.
Stars: ✭ 16 (-15.79%)
Mutual labels:  hook, react-hooks
ReSift
A state management library for data fetches in React
Stars: ✭ 39 (+105.26%)
Mutual labels:  hook, react-hooks
use-countdown-timer
React hook exposing a countdown timer with optional expiration reset callbacks
Stars: ✭ 31 (+63.16%)
Mutual labels:  countdown, react-hooks
use-dencrypt-effect
⚛ A custom React hook generating crypting text effect.
Stars: ✭ 39 (+105.26%)
Mutual labels:  hook, react-hooks
usehooks-ts
React hook library, ready to use, written in Typescript.
Stars: ✭ 2,873 (+15021.05%)
Mutual labels:  hook, react-hooks
react-use-hotkeys
React hook for creating simple keyboard shortcuts
Stars: ✭ 74 (+289.47%)
Mutual labels:  hook, react-hooks
web
React hooks done right, for browser and SSR.
Stars: ✭ 940 (+4847.37%)
Mutual labels:  hook, react-hooks
window-scroll-position
React hook for Window scroll position
Stars: ✭ 81 (+326.32%)
Mutual labels:  hook, react-hooks
formalizer
React hooks based form validation made for humans.
Stars: ✭ 12 (-36.84%)
Mutual labels:  hook, react-hooks
react-ui-hooks
🧩Simple repository of React hooks for building UI components
Stars: ✭ 20 (+5.26%)
Mutual labels:  hook, react-hooks
React Timer Hook
React timer hook
Stars: ✭ 118 (+521.05%)
Mutual labels:  hook, countdown
useAudioPlayer
Custom React hook & context for controlling browser audio
Stars: ✭ 176 (+826.32%)
Mutual labels:  hook, react-hooks
Fre
👻 Tiny Footprint Concurrent UI library for Fiber.
Stars: ✭ 3,195 (+16715.79%)
Mutual labels:  hook, react-hooks
use-route-as-state
Use React Router route and query string as component state
Stars: ✭ 37 (+94.74%)
Mutual labels:  hook, react-hooks
Xmark
A PHP7 extension that can hook most functions/classes and parts of opcodes
Stars: ✭ 209 (+1000%)
Mutual labels:  hook
Funchook
Hook function calls by inserting jump instructions at runtime
Stars: ✭ 253 (+1231.58%)
Mutual labels:  hook
Xhook
🔥 A PLT hook library for Android native ELF.
Stars: ✭ 2,996 (+15668.42%)
Mutual labels:  hook
Elfhook
modify PLT to hook api, supported android 5\6.
Stars: ✭ 202 (+963.16%)
Mutual labels:  hook
use-google-sheets
📝 A React Hook for getting data from Google Sheets API v4
Stars: ✭ 75 (+294.74%)
Mutual labels:  react-hooks

react-use-countdown

CircleCI

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].