Package Exports

react-simple-timefield

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-simple-timefield) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-simple-timefield

Simple React time input field, check out demo.

Installation

npm install --save react-simple-timefield

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

Usage

import TimeField from 'react-simple-timefield';
...
<TimeField
    value={time}                     // {String}   required, format '00:00' or '00:00:00'
    onChange={(value) => {...}}      // {Function} required
    input={<MyCustomInputElement />} // {Element}  default: <input type="text" />
    colon=":"                        // {String}   default: ":"
    showSeconds                      // {Boolean}  default: false
/>

Real world example

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(time) {
    this.setState({time});
  }

  render() {
    const {time} = this.state;

    return (
      <TimeField value={time} onChange={this.onTimeChange} />
    );
  }
}

Changelog

2.0.3 user can type letter when component first loads (closes #9) (8f51c70)
2.0.1 Do not fall if value/onChange is undefined (part of issue #8)
2.0.0 React v16 support
1.3.0 Added custom colon property
1.2.0 Added custom input field property
1.1.0 Added showSeconds property
1.0.0 Initial release

Contributing

Run demo:

For running demo locally, replace:

import TimeField from '../';
// to
import TimeField from '../src';

in demo/index.js file.

# run development mode
cd demo
npm run dev

Build:

npm test
npm run format
npm run build

License

MIT License. Free use and change.