Custom React Duration Picker

A simple, flexible, and performant duration picker for any React application. This component allows users to select a duration in hours, minutes, and seconds, and returns the total duration in seconds.

Installation

To install the custom-react-duration-picker package, run the following command:

npm  install  custom-react-duration-picker
or
yarn  add  custom-react-duration-picker

Usage

Example Usage in a React Component

Here's an example of how to use the DurationPicker component in your React application.

"use client" // only for next application
	import { DurationPicker } from "custom-react-duration-picker";
	import { useState } from "react";
	
	export default function Home() {
		const [timeInSecond, setTimeInSecond] = useState<number>(0);
		return (
			<div>
				<DurationPicker
					seconds={367} // Initial time in seconds
					disabled={false} // Set to 'false' to enable the picker, 'true' to disable it
					onChange={(totalSeconds: number) => {
						setTimeInSecond(totalSeconds); // Updates the time in seconds
					}}
				/>
				<div>Time In Seconds: {timeInSecond}</div>
			</div>
		);
	}

Props

| Prop | Type | Default | Description | |------------|--------------------------------------|---------|-----------------------------------------------------------------------------| | seconds | number | 0 | The initial duration in seconds. If not provided, defaults to 0. | | onChange | (totalSeconds: number) => void | - | Callback function that is triggered when the duration changes. It returns the total duration in seconds. | | disabled | boolean | false | Whether the picker is disabled. Set to true to disable the component. |

Example Output

When using the DurationPicker, users will be able to select hours, minutes, and seconds, and the total selected time in seconds will be reflected.

Example UI

• Hours selector will range from 0 to 23.
• Minutes and Seconds selectors will range from 0 to 59.

Styling

This component uses basic inline styling. However, you can override the default styles using CSS or your styling method of choice.

License

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

Notes:

• The Usage section explains how to import and use the component.
• The Props section describes the component's configurable properties.
• I included Installation instructions for npm/yarn.
• Example Output gives users an understanding of what they can expect from the component visually.