material-duration-picker

React Material component for durations inspired by Material-UI Pickers

Usage no npm install needed!

<script type="module">
  import materialDurationPicker from 'https://cdn.skypack.dev/material-duration-picker';
</script>

README

Material-Duration-Picker

Simple duration picker inspired by Material-UI Pickers

image

To install

npm install --save material-duration-picker

or

yarn add material-duration-picker

Dependencies:

To use:

This example uses date-fns to format the duration

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

const Comp = () => {
  const [value, setValue] = useState(0)
  return (
    <div>
      <DurationPicker
        label='Duration'
        value={value}
        onValueChange={(v) => setValue(v)}
        formatDuration={formatDuration}
      />
    </div>
  );
}

demo

Props

  • 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

Localisation

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

Sandbox example