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.

Demo

Installation

npm install --save react-simple-timefield

Usage

import TimeField from 'react-simple-timefield';
...
<TimeField
    value={time}                  // required, format '00:00' or '00:00:00'
    onChange={this.onTimeChange}  // required
    showSeconds                   // 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 (
      <section>
        <TimeField value={time} onChange={this.onTimeChange} />
        <TimeField
          value={time}
          onChange={this.onTimeChange}
          style={{color: '#333'}}
        />
       </section>
    );
  }
}

Changelog

1.1.0 Added showSeconds property
1.0.0 Initial release

Contributing

# run development mode
cd demo
npm run dev

# run demo build
cd demo
npm run build

# run main build
npm run build

# run lint
npm run lint

Todo

Support full time format with seconds
Material UI support
Tests

License

MIT License. Free use and change.