React-Duration

Easy-to-use duration input field for react.

Getting Started

First, install react-duration using npm: npm i react-duration

Then import react-duration into your project: import DurationInput from 'react-duration'

Now you're ready to render you're first duration input field:

class MyApp extends React.Component{
    
    constructor(props){
       
       this.state = {
           duration: 125.4 // Duration values are given in seconds.
       }
    }
    
    render(){
        
        return (    
            <DurationInput
                value={ this.state.duration }
                onChange={ new_duration=> this.setState({duration: new_duration}) }
            />
        );
    }
}

Props

Prop	Accepts	Description
buttonIncrement	Float	The amount, in seconds, to increment the duration by when the up or down butons are presssed.
maxValue	Float	The maximum value, in seconds, allowed.
minValue	Float	The minimum value, in seconds, allowed.
onChange	Callback	A function to be called whenever the duration is changed to and is in a valid format.
style	Object	A valid react style prop to be applied to the DurationInput wrapper.

Styling

In addition to the passing in a style object for the container using the style prop, react-duration has the following classes for easy styling:

Class	Assigned To
duration-input-wrapper	Wrapper around all internal elements
duration-input	Internal text input field
duration-input-button-wrapper	Wrapper around the up and down buttons
duration-input-button	Both the up and down buttons
duration-up-button	Up Button
duration-down-button	Down Button