Skip to content

React component rendering a simple page with a countdown timer.

License

Notifications You must be signed in to change notification settings

cyntler/react-coming

Repository files navigation

npm-version npm-download

react-coming

React component rendering a simple page with a countdown timer.

Preview

preview.png

Motivation

Sometimes, when we are working on a website or web application, we want to do deploy and show something to our users as quickly as possible. The react-coming library allows you to quickly render a view with a future date countdown. You can set this component to be enabled and rendered only for the production build, for example.

Installation

To install the hook you can use npm:

npm i react-coming

or Yarn if you prefer:

yarn add react-coming

Usage

All you need is simple import the component:

import { Coming } from 'react-coming';

And render the component:

import { render } from 'react-dom';
import { Coming } from 'react-coming';

render(
  <Coming enabled={process.env.NODE_ENV === 'production'} toDate="YYYY-MM-DD">
    <App />
  </Coming>,
  document.getElementById('app')
);

When the countdown is over (0 seconds left) then the children prop will be rendered.

Children will also be rendered if you give a wrong date format.

Custom render component

If you want, you can pass customComponent prop to the Coming component to render your own component instead of the default countdown page.

Passed component will receive countdown data as props: days, hours, minutes, seconds.

You can use the countdown data to display inside your own component.

Available Props

Name Type Description Default value
enabled boolean Prop that indicates whether the Coming component should be rendered. true
toDate string Date in the format YYYY-MM-DD to which the component will countdown. Current date + 3 months
toTime string Time in HH:MM format to which the component will countdown. 00:00
daysLabel string Label text for days. days
hoursLabel string Label text for hours. hours
minutesLabel string Label text for minutes. minutes
secondsLabel string Label text for seconds. seconds
customComponent React Component Custom React component to render instead of default Coming countdown page -