Skip to content

React input component that auto formats time durations from user input.

License

Notifications You must be signed in to change notification settings

kennybecerra/react-duration-input

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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 (stae 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.

About

React input component that auto formats time durations from user input.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published