Neverending Plethora of Modules

    material-duration-picker
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.2 • Public • Published

    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

    Install

    npm i material-duration-picker

    DownloadsWeekly Downloads

    16

    Version

    1.4.2

    License

    MIT

    Unpacked Size

    30.2 kB

    Total Files

    18

    Last publish

    Collaborators

    • tran-simon