react-time-range-select/README.md

A Time range selector for React, powered with hooks

# React-Time-Range-Select

React time range select with validation and powered with hooks.

Installation
-----

```
npm install react-time-range-select --save
```

Dependencies
-----
- React.JS
- Moment.JS

Usage
-----

```
import TimeRangeSelect from "./react-time-range-select";

class HomeComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startTime: "2019-10-05T01:48:00.000Z",
      endTime: "2019-10-05T03:48:00.000Z"
    };
  }

  changeStartTime = value => {
    this.setState({ startTime: value });
  };

  changeEndTime = value => {
    this.setState({ endTime: value });
  };

  render() {
    return (
      <TimeRangeSelect
        startTime={this.state.startTime}
        endTime={this.state.endTime}
        mode24Hours
        onChangeStart={this.changeStartTime}
        onChangeEnd={this.changeEndTime}
      />
    );
  }
}
export default Home;
```

Component Props
-----

| Property | Type | Default | Description |
|:---|:---|:---|:---|
| `startLabel` | string | "Start Time" | Text label that appears before the start time select. |
| `endLabel` | string | "End Time" | Text label that appears before the end time select. |
| `startTime` | string | undefined | A moment ISO 8601 time string for start time. |
| `endTime` | string | undefined | A moment ISO 8601 time string for end time. |
| `mode24Hours` | bool | false | Display 12 hour or 24 hour time. |
| `className` | string | undefined | It's for handling custom styling of the component. |
| `minuteIncrement` | Number | 30 | Defines the increments in time that should appear in the select. Increments must be one of these `1, 2, 5, 10, 15, 20, 30, 60` minutes. |
| `sameIsValid` | boolean | true | If both the start and end times are the same. |
| `onClick` | function | undefined | Function that is called when one of the time select options is clicked. |
| `onChange` | function | undefined | Function that is called when one of the values in the time select changes. |
| `showErrors` | boolean | true | Display an error message when the input times are invalid. |
| `equalTimeError` | string | "Please enter a valid time. Start and End times cannot be the same." | Error is rendered when both start and time values are the same, and this is considered invalid when `sameIsValid={true}`|
| `endTimeError` | string | "Please enter a valid time. End time cannot be before start time." | Error string that is showing when the selected end time is before the start time.|
| `onStartTimeClick` | function | undefined | Function that is called when the start time select is clicked. |
| `onStartTimeChange` | function | undefined |Function that is called when the start time select value is changed. |
| `onEndTimeClick` | function | undefined | Function that is called when the end time select option is clicked. |
| `onEndTimeChange` | function | undefined |Function that is called when the end time select value is changed. |

# License

MIT