Skip to content

Latest commit

 

History

History
113 lines (92 loc) · 2.91 KB

README.md

File metadata and controls

113 lines (92 loc) · 2.91 KB

@meecrobe/react-time-hook

🕑 React hook for formatting string to 12- or 24-hour time.

Build

Demo

Live demo

Installation

$ yarn add @meecrobe/react-time-hook

Usage

import { useCallback, useState } from 'react';
import { useTime } from '@meecrobe/react-time-hook';

function TimeInput() {
  const [value, setValue] = useState('');
  const time = useTime(value);

  const handleChange = React.useCallback((e) => {
    setValue(e.target.value);
  }, []);

  const handleBlur = React.useCallback(() => {
    setValue(time);
  }, [time]);

  return (
    <input
      type="text"
      value={value}
      onChange={handleChange}
      onBlur={handleBlur}
    />
  );
}

Props

Prop Type Description
initialValue string Initial value
format '12' | '24' Time format
padZero boolean Add leading zero to hours in 12-hour format

Examples of string values and their formatting results

To 12-hour time format (without leading zeros)
Input Output
'' '12:00 AM'
'0' '12:00 AM'
'1' '1:00 AM'
'10' '10:00 AM'
'12' '12:00 PM'
'13' '1:00 PM'
'24' '12:00 AM'
'99' '12:00 AM'
'345' '3:45 AM'
'1334' '1:34 PM'
'5889' '12:00 AM'
'1:4' '1:04 AM'
'11:4' '11:04 AM'
'26:09' '12:09 AM'
'12:20' '12:20 PM'
'2000' '8:00 PM'
'3p' '3:00 PM
'8:21p' '8:21 PM'
'821p' '8:21 PM'
'1201am' '12:01 AM'
'3:' '3:00 AM'
To 24-hour time format
Input Output
'1' '01:00'
'10' '10:00'
'111' '01:11'
'153' '01:53'
'1820' '18:20'
'2400' '00:00'
'1:4' '01:04'
'11:4' '11:04'
'2244' '22:44'
'3p' '15:00'
'8:21am' '08:21'
'8:21p' '20:21'
'821p' '20:21'
'3p' '15:00'
'8:21p' '20:21'
'03:55 AM' '03:55'
'03:55 PM' '15:55'
'12:01 AM' '00:01'
'1201a' '00:01'
'00:55' '00:55'
'66:66' '00:00'
'22:' '22:00'