@viacast/react-simple-timefield
    TypeScript icon, indicating that this package has built-in type declarations

    3.3.2 • Public • Published

    react-simple-timefield

    Simple React time input field, check out demo.

    Build Status Coverage Status npm npm GitHub license

    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={(event, value) => {...}} // {Function} required
        input={<MyCustomInputElement />}   // {Element}  default: <input type="text" />
        inputRef={(ref) => {...}}          // {Function} input's ref
        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(event, time) {
        this.setState({time});
      }
    
      render() {
        const {time} = this.state;
    
        return (
          <TimeField value={time} onChange={this.onTimeChange} />
        );
      }
    }

    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.

    // Before:
    <TimeField onChange={(value) => console.log(value)} />
    
    // After:
    <TimeField onChange={(event, value) => console.log(event, value)} />

    Contributing

    Run demo:

    For running demo locally, replace:

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

    in demo/index.tsx file.

    # run development mode
    cd demo
    npm install
    npm install --only=dev
    npm run dev

    Build:

    npm install
    npm install --only=dev
    npm test
    npm run format
    npm run build

    License

    MIT License. Free use and change.

    Install

    npm i @viacast/react-simple-timefield

    DownloadsWeekly Downloads

    8

    Version

    3.3.2

    License

    MIT

    Unpacked Size

    489 kB

    Total Files

    19

    Last publish

    Collaborators

    • jablonski