React Duration Input

A headless react input component that auto formats duration as user types in values.

Installation

Install via NPM:

npm install --save react-duration-input

Usage

import { useDurationInput } from 'react-duration-input';

function InputDurationComponent() {
  const inputProps = useDurationInput();

  return <input {...inputProps} />;
}

Examples

Basic Usage

You can use the component as a controlled component and pass in the time in milliseconds to the timeinMilliseconds prop.

import { useDurationInput } from 'react-duration-input';

function InputDurationComponent() {
  const [duration, setDuration] = useState(0);

  const inputProps = useDurationInput({ timeInMilliseconds: duration });

  const addOneSecond = setDuration((prev) => prev + 1000);
  const removeOneSeconds = setDuration((prev) => prev - 1000);

  return (
    <div>
      <input {...inputProps} />
      <button onClick={addOneSecond}>+ 1 </button>
      <button onClick={removeOneSeconds}>- 1 </button>
    </div>
  );
}

Or you can use the component as a stand alone and capture the time in milliseconds via the onTimeUpdate event.

import { useDurationInput } from 'react-duration-input';

function InputDurationComponent() {
  const [duration, setDuration] = useState(0);

  const handleTimeUpdate = (timeInMilliseconds) => setDuration(timeInMilliseconds);

  const inputProps = useDurationInput({ onTimeUpdate: handleTimeUpdate });

  return (
    <div>
      <input {...inputProps} />
    </div>
  );
}

Props

| Prop | Accepts | Default | Description | | ---------------------- | -------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | timeInMilliseconds | number | 0 | time value shown in duration input in milliseconds. | | showMilliseconds | boolean | true | toggle format in input component to show milliseconds (state inside component is alawys in milliseconds). | | allowInPlaceDeletion | boolean | true | when user finishes typing out duration format and then places cursor in the middle of the duration value to overide a specific place value (i.e. the minutes slot tens place value ). This prop will ensure the new typed number overrides this place value instead of shifting entire duration string. | | separator | string | ":" | string value to separate hours minutes and seconds. | | allowOverflow | boolean | false | allow the user to overflow a time slot, the logic will recalculate this format it correctly to the next time slot (i.e 90 minutes -> 1 hour 30 minutes) | | max | number | Number.POSITIVE_INFINITY | sets a ceiling to any value passed or calculated in duration input component. | | editable | boolean | true | allows user to edit the duration value in the input | | disabled | boolean | true | disable the input component | | className | string | "" | class to add to input component | | onTimeUpdate | callback | (timeInMilliseconds: number) => void | call back that runs on every correct update to input component. (Correct as in any time the user types a new duration will make a check for correct format then update internal duration value). | | onManualInputUpdate | callback | ({inputText: string; timeInMilliseconds: number or null; isCorrectFormat: boolean;}) => void | call back that runs on every update to input component. Not the same as the current duration value inside the input component. (i.e. user is in the middle of deleting and re adding duration values) |

CSS

You can add the css provided for some nice default styles on success/error states. Or you can add your own via the className prop.

import { useDurationInput } from 'react-duration-input';
import 'react-duration-input/dist/index.css';

function InputDurationComponent() {
  const [duration, setDuration] = useState(0);

  const handleTimeUpdate = (timeInMilliseconds) => setDuration(timeInMilliseconds);

  const inputProps = useDurationInput({ onTimeUpdate: handleTimeUpdate });

  return (
    <div>
      <input {...inputProps} />
    </div>
  );
}

Headless UI

This component was made with the idea of "Headless UI" and inversion of control design. The logic is isolated in a react hook allowing the developer to provide the ui (i.e. input component). You are free to overide the provided input props.

For example. you can override the className prop to any value you want, add your own style prop, placeholder prop, pattern prop, etc.

Please keep in mind that the hook places a ref to the input component provided in order to capture the correct events and values.