react-time-duration-input

TimeDurationInput

Provide simple time duration input in your React app.

Installation

Install via NPM:

npm install --save react-time-duration-input

Usage

import { TimeDurationInput } from 'react-time-duration-input'
 
function SampleComponent () {
  const [ value, setValue ] = useState(2443332000)
 
  return (<TimeDurationInput value={value} onChange={setValue} />)
}

Examples

Basic Usage

Pass your duration value (in milliseconds) to the value property, and it will be displayed in "#d #h #m #s #ms" format. When the user change the displayed value, and onChange will be called with the new millisecond value.

<TimeDurationInput
  value={milliseconds}
  onChange={(newValue) => setMilliseconds(newValue)} />

Custom CSS Classes

Provide a className value and it will be passed along to the inner input element.

<TimeDurationInput
  value={value}
  className="form-control"
  onChange={setValue} />

Scaled Values

Provide one of the scale values ("d", "h", "m", "s", or "ms") to the scale property and value will be read as being at that scale and onChange will be passed values at that scale.

For example, if scale is set to "h" then a value of 3 will appear as "3h" instead of "3ms", and if "1h 45m" is entered in the inner input element, onChange will be called with a value of 1.75.

<TimeDurationInput
  value={hours}
  scale="h"
  onChange={(newValue) => setHours(newValue)} />