https://github.com/antonfisher/react-simple-timefield

Simple React time input field
https://github.com/antonfisher/react-simple-timefield

react timefield timeinput

Last synced: 7 months ago
JSON representation

Simple React time input field

• Host: GitHub
• URL: https://github.com/antonfisher/react-simple-timefield
• Owner: antonfisher
• License: mit
• Created: 2017-08-27T06:20:08.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-26T06:30:44.000Z (almost 3 years ago)
• Last Synced: 2025-03-29T21:08:58.318Z (7 months ago)
• Topics: react, timefield, timeinput
• Language: TypeScript
• Homepage: https://antonfisher.com/react-simple-timefield/
• Size: 1.67 MB
• Stars: 96
• Watchers: 4
• Forks: 47
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-components - react-simple-timefield - [demo](https://antonfisher.com/react-simple-timefield/) - Simple time input field. (UI Components / Form Components)
• awesome-react - react-simple-timefield - Simple time input field.  (UI Components / Form Components)
• awesome-react-components - react-simple-timefield - [demo](https://antonfisher.com/react-simple-timefield/) - Simple time input field. (UI Components / Form Components)
• awesome-react-components - react-simple-timefield - [demo](https://antonfisher.com/react-simple-timefield/) - Simple time input field. (UI Components / Form Components)
• awesome-react-components - react-simple-timefield - [demo](https://antonfisher.com/react-simple-timefield/) - Simple time input field. (UI Components / Form Components)
• fucking-awesome-react-components - react-simple-timefield - 🌎 [demo](antonfisher.com/react-simple-timefield/) - Simple time input field. (UI Components / Form Components)
• awesome-react-components - react-simple-timefield - [demo](https://antonfisher.com/react-simple-timefield/) - Simple time input field. (UI Components / Form Components)
• awesome-react-components - react-simple-timefield - [demo](https://antonfisher.com/react-simple-timefield/) - Simple time input field. (UI Components / Form Components)

README

          
# react-simple-timefield

Simple React time input field, check out [demo](https://antonfisher.com/react-simple-timefield/).

[![Build Status](https://travis-ci.org/antonfisher/react-simple-timefield.svg?branch=master)](https://travis-ci.org/antonfisher/react-simple-timefield)

[![Coverage Status](https://coveralls.io/repos/github/antonfisher/react-simple-timefield/badge.svg?branch=master)](https://coveralls.io/github/antonfisher/react-simple-timefield?branch=master)

[![npm](https://img.shields.io/npm/dt/react-simple-timefield.svg?colorB=brightgreen)](https://www.npmjs.com/package/react-simple-timefield)

[![npm](https://img.shields.io/npm/v/react-simple-timefield.svg?colorB=brightgreen)](https://www.npmjs.com/package/react-simple-timefield)

[![GitHub license](https://img.shields.io/github/license/antonfisher/react-simple-timefield.svg)](https://github.com/antonfisher/react-simple-timefield/blob/master/LICENSE)

[![Demo](docs/demo.gif)](https://antonfisher.com/react-simple-timefield/)

## Installation

```bash

npm install --save react-simple-timefield

#for React <16 use: npm install --save react-simple-timefield@1

```

## Usage

```jsx

import TimeField from 'react-simple-timefield';

...

 {...}} // {Function} required

    input={}   // {Element}  default: 

    inputRef={(ref) => {...}}          // {Function} input's ref

    colon=":"                          // {String}   default: ":"

    showSeconds                        // {Boolean}  default: false

/>

```

## Real world example

```jsx

import TimeField from 'react-simple-timefield';

class App extends React.Component {

  constructor(...args) {

    super(...args);

    this.state = {

      time: '12:34'

    };

    this.onTimeChange = this.onTimeChange.bind(this);

  }

  onTimeChange(event, time) {

    this.setState({time});

  }

  render() {

    const {time} = this.state;

    return (

      

    );

  }

}

```

## Migrate version 2.x to version 3.x

There is a breaking change in version 3.

The `onChange` callback property will be called with two arguments.

```jsx

// Before:

 console.log(value)} />

// After:

 console.log(event, value)} />

```

## Contributing

#### Run demo:

For running demo locally, replace:

```javascript

import TimeField from '../';

// to

import TimeField from '../src';

```

in `demo/index.tsx` file.

```bash

# run development mode

cd demo

npm install

npm install --only=dev

npm run dev

```

#### Build:

```bash

npm install

npm install --only=dev

npm test

npm run format

npm run build

```

## License

MIT License. Free use and change.