restructure react component and add demo page

Author: fluse

.babelrc

@@ -1,3 +1,4 @@
 {
-  "presets": ["es2015", "react"]
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": ["@babel/plugin-proposal-class-properties"]
 }

README.md

@@ -1,89 +1,79 @@
-# react-list-scroll-bound
-prevent body scrolling on list bottom or top end.
-Brings a better control for user and increase use experience.
+# react-scroll-bound
 
-## example
+prevent scrolling on parent element if list reach end or start
+Brings a better control for user and increase use experience.
 
-![ScreenShot](/example.png)
+**[Watch Demo](https://fluse.github.io/react-scroll-bound/)**
 
 supports react 15.x and 16.x
 
-[![npm package](https://nodei.co/npm/react-list-scroll-bound.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/react-list-scroll-bound/)
-[![NPM](https://nodei.co/npm-dl/react-list-scroll-bound.png?months=6&height=3)](https://www.npmjs.com/package/react-list-scroll-bound)
-
-## install
+## Install
 
 ```
-> npm install react-list-scroll-bound --save
+npm install react-scroll-bound --save
 ```
 
-## how to use
+## Usage
 
 ```jsx
 
-<ListScrollBound className="my-list">
+import ScrollBound from 'react-scroll-bound'
+
+<ScrollBound>
     {this.getListPoints()}
-</ListScrollBound>
+</ScrollBound>
 
 ```
 
-### set html tag
-
-default tagName is `<ul>`
-
-```jsx
-
-<ListScrollBound tagName="div" className="my-list">
-    {this.getListPoints()}
-</ListScrollBound>
+Set css for element overflow scroll
 
+```css
+.my-class-name {
+    max-height: 250px;
+    overflow-y: auto;
+}
 ```
 
-### get events
-
-```jsx
+### Change HTML-Tag
 
-let onWheel = function (event) {
-    console.log(event)
-}
+default tagName is `<ul>`
 
-let onClick = function (event) {
-    console.log(event)
-}
+```jsx
 
-<ListScrollBound onWheel={onWheel} onClick={onClick} className="my-list">
+<ScrollBound tagName="div">
     {this.getListPoints()}
-</ListScrollBound>
+</ScrollBound>
 
 ```
 
-### set more propTypes
-
-all given properties will set on the given ListScrollBound element, with
-
-`{...this.props}`
+### Set properties
 
-so you can set all what you want and need
+all attributes and properties will transmitted with `{...this.props}`
 
 ```jsx
 
-<ListScrollBound tagName="div" className="my-list" onChange onClick>
+<ScrollBound 
+    id="name" 
+    onWheel={onWheel} 
+    onClick={onClick} 
+    className="my-list"
+>
     {this.getListPoints()}
-</ListScrollBound>
+</ScrollBound>
 
 ```
 
-### Development
+## Development
 
 if you want to add or optimize this component, feel free <3
 
-clone this repository and run install
+#### Run Dev Server
 
 ```
-npm install
+npm start
 ```
 
-and after changes compile es6 to es5
+### Compile to ES5
 
 ```
 npm run compile