1.0.2 • Published 4 years ago

@kfiros/react-countdown-hook v1.0.2

Weekly downloads
-
License
ISC
Repository
github
Last release
4 years ago

react-countdown-hook

npm latest
A React hook that gets a date object and returns a countdown to that date.

Install

npm i @kfiros/react-countdown-hook

Features

  • Format the countdown however you want
  • Get an object that includes all the data of the countdown
  • Run a function when the countdown ends
  • Uses date-fns

Props

NameDescriptionTypeDefaultExample
finishTimeThe time that we should count toDaterequiredexample
formatThe format of the formatted stringString''example
onFinishA function that runs when the count finishesfunction() => {}example

Examples

Getting formatted countdown string

You can get a formatted countdown string in a given format.
Only characters inside curly brackets will be formatted, if you want to add regular English - do it outside of the curly brackets.

Examples of valid formats

  • {hh:mm:ss}
  • {y} years, {M} months, {d} days, {h} hours, {m} minutes, {d} days

Format patterns

UnitPatternResult examples
Seconds0, 6, 9, 42
ss00, 06, 09, 42
Minutem0, 6, 9, 42
mm00, 06, 09, 42
Hourh0, 6, 9, 42
hh00, 06, 09, 42
Dayd0, 6, 9, 42
dd00, 06, 09, 42
MonthM0, 6, 9, 42
MM00, 06, 09, 42
Yeary0, 6, 9, 42
yy00, 06, 09, 42

Example usage

import React from 'react';
import { useCountdown } from '@kfiros/react-countdown-hook';

const App() {
  const { formattedText } = useCountdown({
    finishTime: new Date(2022, 2, 11),
    format: "{hh:mm:ss}"
  });

  return (
    <span>{formattedText}</span>
  );
}

export default { App };

Getting an object

You can also get a date-fns duration object that includes all the data of the countdown.

Example usage

import React from 'react';
import { useCountdown } from '@kfiros/react-countdown-hook';

const App() {
  const { countdown } = useCountdown({
    finishTime: new Date(2022, 2, 11)
  });

  return (
    <span>{JSON.stringify(countdown)}</span>
  );
}

export default { App };

Invoke a function on finish

import React, { useRef } from 'react';
import { Text } from 'react-native';
import Confetti from 'react-native-confetti';
import { useCountdown } from '@kfiros/react-countdown-hook';

const App() {
  const confetti = useRef(null);
  const { countdown } = useCountdown({
    finishTime: new Date(2022, 2, 11),
    onFinish: () => confetti.startConfetti();
  });

  return (
    <Confetti ref={confetti}>
      <Text>{JSON.stringify(countdown)}</Text>
    </Confetti>
  );
}

export default { App };

Demo

About me

Follow on Twitter
Feel free to DM me on Twitter.

License

Copyright (c) 2021 Kfir Nevo

This project is licensed under the terms of the MIT license. See the license file.

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago