react-duration-control

A time duration input component that allows the user to define a duration in days, hours, minutes, seconds and milliseconds.

A demo can be found HERE

Install

$ npm install react-duration-control

Usage

import DurationControl from "react-duration-control";

import "react-duration-control/dist/react-duration-control.css";

const [millis, setMillis] = useState(0);

<DurationControl 
    label="Duration"
    pattern="Days {dd} Hours {hh} Minutes {mm} Seconds {ss} Milliseconds {fff}"
    value={millis} 
    onChange={setMillis}
/>

The backing value for the control is the number of milliseconds represented by the units included in the control pattern and their quantities.

Props

| Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | value | number | | The value of the control in milliseconds. | | onChange | func | | Callback fired when the value in milliseconds is changed. The value is passed as the first and only argument. (millis: number) => void | | pattern | string || The pattern used to construct the control contents, defining both the static inline text and inline unit input controls. The pattern will be parsed for any units which are defined using one or more duration unit characters (d=day/h=hour/m=minute/s=second/f=millisecond) wrapped in curly brackets. Any parsed units will be substitued with an inline unit input box which is displayed when the unit value is clicked on in the control. Any unit values will be padded with zeros, the number of which being defined by the number of duration unit characters used. Any part of the pattern that does not match the duration unit syntax will be treated as static inline text. | | label | string | | The control label content. | | disabled | bool | false | If true, the control will be disabled. | | hideSpinner | bool | false | If true, the up and down spinner buttons will not be shown. | | isRolloverUnitValues | bool | false | If true, it allows unit values (e.g., minutes, hours) to roll over to the next higher unit. For example: - Typing 59 into the minutes field and incrementing by 1 will reset the minutes to 0 and increment the hours by 1. - Typing 65 into the minutes field will reset the minutes to 5 and increment the hours by 1. |