Material-Duration-Picker

Simple duration picker inspired by Material-UI Pickers

!image

To install

``bash
npm install --save material-duration-picker
`

or

`bash
yarn add material-duration-picker
`

$3

* Material-UI
* React

To use:

This example uses date-fns to format the duration

`typescript jsx
import {DurationPicker} from "./durationPicker";
import {formatDuration} from 'date-fns'

const Comp = () => {
const [value, setValue] = useState(0)
return (



);
}
``

demo

$3

* value: (REQUIRED) The duration value in seconds
* onValueChange: (REQUIRED) On change callback
* formatDuration: function to customize the way that the duration is formatted
* views: Array of views to offer. MUST BE FROM BIGGEST TO SMALLEST ex: ['weeks', 'minutes', 'seconds']
* disableEditDialog: If should not enable the edit dialog on click of the field
* DurationDialogProps: Props passed to the dialog

Remaining props are passed to the TextField component

$3

https://github.com/tran-simon/material-duration-picker/issues/1#issuecomment-870100173

Sandbox example