Provide simple time duration input in your React app.
Install via NPM:
npm install --save react-time-duration-input
import { TimeDurationInput } from 'react-time-duration-input'
function SampleComponent () {
const [ value, setValue ] = useState(2443332000)
return (<TimeDurationInput value={value} onChange={setValue} />)
}
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)} />
Provide a className
value and it will be passed along to the inner
input element.
<TimeDurationInput
value={value}
className="form-control"
onChange={setValue} />
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)} />