@meecrobe/react-time-hook v0.5.0

@meecrobe/react-time-hook

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

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

Examples of string values and their formatting results