https://github.com/cyntler/react-coming

React component rendering a simple page with a countdown timer.
https://github.com/cyntler/react-coming

coming coming-soon component countdown react react-library

Last synced: about 1 month ago
JSON representation

React component rendering a simple page with a countdown timer.

• Host: GitHub
• URL: https://github.com/cyntler/react-coming
• Owner: cyntler
• License: mit
• Created: 2021-03-07T17:29:33.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-09-26T18:10:47.000Z (over 3 years ago)
• Last Synced: 2024-12-01T12:41:45.143Z (about 2 months ago)
• Topics: coming, coming-soon, component, countdown, react, react-library
• Language: TypeScript
• Homepage:
• Size: 975 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![npm-version](https://img.shields.io/npm/v/react-coming.svg)](https://www.npmjs.com/package/react-coming)

[![npm-download](https://img.shields.io/npm/dt/react-coming.svg)](https://www.npmjs.com/package/react-coming)

# react-coming

React component rendering a simple page with a countdown timer.

## Preview

![preview.png](https://raw.githubusercontent.com/cyntler/react-coming/main/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:

```shell

npm i react-coming

```

or Yarn if you prefer:

```shell

yarn add react-coming

```

## Usage

All you need is simple import the component:

```tsx

import { Coming } from 'react-coming';

```

And render the component:

```tsx

import { render } from 'react-dom';

import { Coming } from 'react-coming';

render(

  

    

  ,

  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   | -                       |