react-period-display

React Period Display

A React component that renders content based on real-time checks of specified start and end dates. This component is useful for displaying content that should only be visible during a certain time period.

Features

• Display content based on a start date.
• Display content until an end date.

Installation

You can install the PeriodDisplay component via npm:

npm i react-period-display

Usage

To use the PeriodDisplay component, first import it into your React application:

import PeriodDisplay from 'react-period-display';

Next, implement the component in your application like this:

<PeriodDisplay showStart={yourStartDate} showEnd={yourEndDate}>
  Your content here
</PeriodDisplay>

Examples

Example 1: Display Content Until End Date

<PeriodDisplay showEnd={new Date('2024/10/23 17:21:20')}>
  Display content until the end date 
</PeriodDisplay>

Example 2: Display Content After Start Date

<PeriodDisplay showStart={new Date('2024/10/23 17:21')}>
  Display content after the start date
</PeriodDisplay>

Example 3: Display Content Within a Specific Period

<PeriodDisplay showStart={startDate} showEnd={endDate}>
  Display content within the period of start and end date
</PeriodDisplay>

License

This project is licensed under the MIT License. See the LICENSE file for details.