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

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

|Name |Type |Requires|Description | |------------------|----------|--------|------------------------------------------| |initTime |string |no |The initial time value the input will hold| |className |string |no |Input fields class names | |divClassName |string |no |The wrapper div's class names | |onFocusHandler |FocusEvent|no |Custom focus handler for the input field | |onTimeChange |FocusEvent|no |Custom handler when the time has changed | |onBlurHandlerSuper|FocusEvent|no |Custom handler for blur |

Styling and children

The input and optional children components are wrapped aroound 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 test use the following command:

npm test