brooklinjazz / use-moment-countdown

a react or react native hook to create countdown timers using moment.js

useCountdown

check out my explanatory blog post here

a react hook for creating countdown timers with moment.js

Install dependencies

npm install --save moment

Install use-moment-countdown

npm install --save use-moment-countdown

Usage

timer set in minutes

import React from "react";

import { useCountdown } from "use-moment-countdown";

const App = () => {
  const { start, time } = useCountdown({ m: 10 });
  return <div onClick={start}>{time.format("hh:mm:ss")}</div>;
};

export default App;

timer set in hours

import React from "react";

import { useCountdown } from "use-moment-countdown";

const App = () => {
  const { start, time } = useCountdown({ h: 1 });
  return <div onClick={start}>{time.format("hh:mm:ss")}</div>;
};

export default App;

timer set in seconds

import React from "react";

import { useCountdown } from "use-moment-countdown";

const App = () => {
  const { start, time } = useCountdown({ s: 30 });
  return <div onClick={start}>{time.format("hh:mm:ss")}</div>;
};

export default App;

timer set in combination of hours, minutes, and seconds

import React from "react";

import { useCountdown } from "use-moment-countdown";

const App = () => {
  const { start, time } = useCountdown({ h: 1, m: 20, s: 30 });
  return <div onClick={start}>{time.format("hh:mm:ss")}</div>;
};

export default App;

recurring timer

import React from "react";

import { useCountdown } from "use-moment-countdown";

const App = () => {
  const { start, time } = useCountdown({ s: 30 }, {recurring: true});
  return <div onClick={start}>{time.format("hh:mm:ss")}</div>;
};

export default App;

onDone callback when timer ends

import React from "react";

import { useCountdown } from "use-moment-countdown";

const App = () => {
  const myOnDoneCallback = () => alert("Your timer has finished!")
  const { start, time } = useCountdown({ s: 30 }, {onDone: myOnDoneCallback});
  return <div onClick={start}>{time.format("hh:mm:ss")}</div>;
};

export default App;

---

This hook is created using create-react-hook.