https://github.com/radumardale/react-keyboard-time-input

A keyboard friendly react component for capturing time
https://github.com/radumardale/react-keyboard-time-input

react-time-field simple-time-field time-input

Last synced: about 2 months ago
JSON representation

A keyboard friendly react component for capturing time

• Host: GitHub
• URL: https://github.com/radumardale/react-keyboard-time-input
• Owner: radumardale
• License: mit
• Fork: true (alanclarke/time-input)
• Created: 2017-05-17T15:02:04.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-06-14T14:24:09.000Z (over 5 years ago)
• Last Synced: 2024-05-16T17:44:50.419Z (4 months ago)
• Topics: react-time-field, simple-time-field, time-input
• Language: JavaScript
• Homepage: https://radumardale.github.io/react-keyboard-time-input/
• Size: 1.09 MB
• Stars: 11
• Watchers: 3
• Forks: 7
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-keyboard-time-input

[![Build Status](https://travis-ci.org/radumardale/react-keyboard-time-input.svg?branch=master)](https://travis-ci.org/radumardale/react-keyboard-time-input)

[![codecov](https://codecov.io/gh/radumardale/react-keyboard-time-input/branch/master/graph/badge.svg)](https://codecov.io/gh/radumardale/react-keyboard-time-input)

[![PeerDependencies](https://img.shields.io/david/peer/radumardale/react-keyboard-time-input.svg)](https://david-dm.org/radumardale/react-keyboard-time-input#info=peerDependencies&view=list)

[![Dependencies](https://img.shields.io/david/radumardale/react-keyboard-time-input.svg)](https://david-dm.org/radumardale/react-keyboard-time-input)

[![DevDependencies](https://img.shields.io/david/dev/radumardale/react-keyboard-time-input.svg)](https://david-dm.org/radumardale/react-keyboard-time-input#info=devDependencies&view=list)

Forked from [alanclarke/time-input](https://github.com/alanclarke/time-input).

A keyboard friendly react component for capturing time.

[DEMO HERE](https://radumardale.github.io/react-keyboard-time-input/)

## Features

- supports `react 16`

- supports es6 and commonjs modules

- small UI surface area (just a form input)

- keyboard friendly (can type times, use up and down keys to go forwards and backwards in time, can tab between time groups)

- simple api (infers most options from value, e.g. 24hr time or 12hr, whether to display seconds and milliseconds)

- easy going UX: ignores invalid input and simply skips over separator if omitted

- no dependencies

- 95% test coverage

## Installation

```

yarn add react-keyboard-time-input

```

or

```

npm install react-keyboard-time-input

```

## Usage

```js

import ReactDom from 'ReactDom';

import TimeInput from 'react-keyboard-time-input';

function render (value) {

  ReactDom.render((

    

  ), document.body)

}

render()

```

## Valid formats

```js

/*

 * '12:00'

 * '12:00 AM'

 * '12:00:00'

 * '12:00:00:000 AM'

*/

```

## Run tests

```

npm test

```