Smart Time Input React Component

This React input component is designed specifically to manage time in a 24-hour format, enhancing the user experience through automated features that simplify time entry.

• Auto Extension and Recognition: The component automatically extends partial time entries by appending or prefixing zeroes where necessary.
• Colon Placement: It intelligently inserts the colon (:) in the correct position.
• Validation: The component ensures that only valid time values are accepted, maintaining data integrity.

Try out the demo app

Install

npm install @osvalda/smart-time-input --save

Usage

Use in jsx/tsx

import { SmartTimeInput } from '@osvalda/smart-time-input';

//...

return (
    <SmartTimeInput
        initTime={props.init}
        placeholder={props.helpText}
        className='input-fields m2'
        id='time-input'
    />
);

Smart Time Input Props (SmartTimeInputProps)

Name	Type	Required	Description	Example
initTime	string	no	The initial time value the input will hold	12:15
className	string	no	Input field's class names	'r-5'
divClassName	string	no	The wrapper div's class names	'border-l-4'
onTimeChange	FocusEvent	no	Change handler of the time value
onBlurHandlerSuper	FocusEvent	no	Blur handler of the input field

Styling and children

The input and optional children components are wrapped around a div with own styleing options via classNames. The input filed can hold icons or interactive elements to enhance its visual appearing.

Radix ui example:

import { SmartTimeInput } from '@osvalda/smart-time-input';

import { CalendarIcon } from '@heroicons/react/24/outline';
import { TextField } from "@radix-ui/themes";

//...

return (
     <SmartTimeInput
        className='rt-reset rt-TextFieldInput'
        divClassName='rt-TextFieldRoot rt-r-size-2 rt-variant-surface'>
        <TextField.Slot>
            <CalendarIcon height="16" width="16" />
        </TextField.Slot>
    </SmartTimeInput>
);

Test

The project uses Jest as test framework with coverage measurement. Currently unit and component level tests are available.

To run all automated tests use the following command:

npm test