@boomslag/react-timer

A flexible and easy-to-use countdown timer component for React. Utilizing dayjs to accurately count down to a specific time.

Installation

npm install @boomslag/react-timer

Or if you're using Yarn:

yarn add @boomslag/react-timer

Usage

First, you'll need to import the component:

import Clock from '@boomslag/react-timer';

Then, use it in your component:

function MyComponent() {
  const endTime = new Date('2023-12-31 23:59:59').toString();

  return <Clock time={endTime} />;
}

Clock expects a time prop which is the ending timestamp to which it should count down. The time should be passed as a string that can be converted into a JavaScript Date object.

Features

Countdown to a specific date and time.
Display remaining days, hours, minutes, and seconds.
Automatic adjustment of time units.
Built-in styling, but can be easily customized.

Customization

You can style the Clock component by targeting its class names with CSS or any other styling method you use. The structure of the component consists of:

Timer container: The topmost wrapper containing the whole timer.
Clock: A flexbox container with individual sections for days, hours, minutes, and seconds.

Styling

The ToastError and ToastSuccess components use the following default CSS classes:

toast-error-message
toast-success-message

You can target these classes in your styles to further customize the appearance of the toasts.

Dependencies

This component depends on dayjs for date calculations. Ensure it's installed in your project.

Contributing

Contributions are welcome! Please submit a pull request or issue on our GitHub repository.

License

MIT