Merge pull request #199 from balazsorban44/patch-2

Update documentation

README.md

@@ -1,14 +1,51 @@
 React Daterange Picker
 ======================
 
-A React based date range picker.
+A React based date range picker. [Demo](http://onefinestay.github.io/react-daterange-picker/)
 
-[Demo](http://onefinestay.github.io/react-daterange-picker/)
+## Getting started
+### Installation
 
-## Getting Started
+Add React Daterange Picker to your project by executing
 
-There's lots of examples within the [demo page](http://onefinestay.github.io/react-daterange-picker/), or check out a minimal example within code CodeSandbox:
+```bash
+npm install react-daterange-picker
+```
+or
+```bash
+yarn add react-daterange-picker
+```
+
+### Usage
+
+Here's an example of basic usage:
+
+```js
+import React, {Component} from 'react'
+import DateRangePicker from 'react-daterange-picker'
+import 'react-daterange-picker/dist/css/react-calendar.css' // For some basic styling. (OPTIONAL)
+
+class MyApp extends Component {
+  state = {
+    dates: null
+  }
+
+  onSelect = dates => this.setState({dates})
+
+  render() {
+    return (
+      <div>
+        <DateRangePicker
+          onSelect={this.onSelect}
+          value={this.state.dates}
+        />
+      </div>
+    )
+  }
+}
+```
 
+Here is a working example:
 [![Edit 0xv5m04yql](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/0xv5m04yql?initialpath=%2Fsrc%2FDateRangeExample.js)
 
 ## Features
@@ -18,13 +55,48 @@ There's lots of examples within the [demo page](http://onefinestay.github.io/rea
 * Show any number of months at the same time.
 * Visually represent half day states.
 
-## React Version
+### Available props
+|prop|description|default|type|
+|--|----|--|----|
+|bemBlock|||String|
+|bemNamespace||'DateRangePicker'|String|
+|className|||String|
+|dateStates|An array of date ranges and their states||Array|
+|defaultState|||String|
+|disableNavigation||false|Boolean|
+|firstOfWeek|The first day of the week, as a number between 0-6, where 0 is Sunday|0|Integer|
+|helpMessage|| |String|
+|initialDate|| |Date|
+|initialFromValue||true|Boolean|
+|initialMonth|Overrides values derived from initialDate/initialRange| |Integer|
+|initialRange|| |Object|
+|initialYear|Overrides values derived from initialDate/initialRange| |Integer|
+|locale||moment().locale()|String|
+|maximumDate|The last date that is possible to choose. Every date after will be unselectable|null|Moment or Date|
+|minimumDate|The earliest date that is possible to choose. Every date before will be unselectable |null|Moment or Date|
+|numberOfCalendars|The number of months showing next to each other|1|Integer|
+|onHighlightDate|Triggered when a date is highlighted (hovered)| |Function|
+|onHighlightRange|Triggered when a range is highlighted (hovered)| |Function|
+|onSelect|Triggered when a date or range is selected. returns `value`| | `({start, end}) => this.setState({start, end})` |
+|onSelectStart|Triggered when the first date in a range is selected| |Function|
+|paginationArrowComponent||PaginationArrow|Component|
+|selectedLabel||'Your selected dates'|String|
+|selectionType|| |String (`single` or `range`)|
+|singleDateRange||false|Boolean|
+|showLegend||false|Boolean|
+|stateDefinitions|| |Object|
+|value|Contains the start and end value of the selected date range. Format: `value={start: null, end: null}` (moment range)|null|Moment|
+
+
+
+
+## React version
 
 React 0.14, 15, and 16 are all supported in the latest version of react-daterange-picker.
 
 If you wish to user an older version of React, please use react-daterange-picker v0.12.x or below.
 
-## Change Log
+## Changelog
 
 All change log information is available within the project's [releases](https://github.com/onefinestay/react-daterange-picker/releases).