readme updated

Author: Fabian Kunde

README.md

@@ -1,54 +1,71 @@
-React Off-Canvas
-=====
+# React Off-Canvas
 
 Off-canvas menus for React.
 
 ## Installation
 
-````bash
+```bash
 $ npm install --save react-offcanvas
-````
+```
 
 ## Usage
 
 ### Basic Usage
 
-````jsx
-<OffCanvas width={300} transitionDuration={300} isMenuOpened={false} position={"left"}>
-  <OffCanvasBody className={"my-body-class"} style={{fontSize: '18px'}}>
+```jsx
+<OffCanvas
+  width={300}
+  transitionDuration={300}
+  isMenuOpened={false}
+  position={"left"}
+>
+  <OffCanvasBody className={"my-body-class"} style={{ fontSize: "18px" }}>
     This is the canvas body.
   </OffCanvasBody>
-  <OffCanvasMenu className={"my-menu-class"} style={{fontWeight: 'bold'}}>
+  <OffCanvasMenu className={"my-menu-class"} style={{ fontWeight: "bold" }}>
     This is the canvas menu.
   </OffCanvasMenu>
 </OffCanvas>
-````
+```
 
 ### Within An Application
 
 You'll need to hook up your application to handle the state for toggling the menu. Check out the basic example below:
 
-````js
-'use strict';
+```js
+"use strict";
 
-import React, { Component } from 'react';
-import { OffCanvas, OffCanvasMenu, OffCanvasBody } from 'react-offcanvas';
+import React, { Component } from "react";
+import { OffCanvas, OffCanvasMenu, OffCanvasBody } from "react-offcanvas";
 
 export default class App extends Component {
-
   componentWillMount() {
     // sets the initial state
     this.setState({
       isMenuOpened: false
-    })
+    });
   }
 
   render() {
     return (
-      <OffCanvas width={300} transitionDuration={300} isMenuOpened={this.state.isMenuOpened} position={"right"}>
-        <OffCanvasBody className={styles.bodyClass} style={{fontSize: '30px'}}>
+      <OffCanvas
+        width={300}
+        transitionDuration={300}
+        effect={"parallax"}
+        isMenuOpened={this.state.isMenuOpened}
+        position={"right"}
+      >
+        <OffCanvasBody
+          className={styles.bodyClass}
+          style={{ fontSize: "30px" }}
+        >
           <p>This is the main body container.</p>
-          <p><a href="#" onClick={this.handleClick.bind(this)}>Click here</a> to toggle the menu.</p>
+          <p>
+            <a href="#" onClick={this.handleClick.bind(this)}>
+              Click here
+            </a>{" "}
+            to toggle the menu.
+          </p>
         </OffCanvasBody>
         <OffCanvasMenu className={styles.menuClass}>
           <p>Placeholder content.</p>
@@ -58,7 +75,11 @@ export default class App extends Component {
             <li>Link 3</li>
             <li>Link 4</li>
             <li>Link 5</li>
-            <li><a href="#" onClick={this.handleClick.bind(this)}>Toggle Menu</a></li>
+            <li>
+              <a href="#" onClick={this.handleClick.bind(this)}>
+                Toggle Menu
+              </a>
+            </li>
           </ul>
         </OffCanvasMenu>
       </OffCanvas>
@@ -69,41 +90,41 @@ export default class App extends Component {
     // toggles the menu opened state
     this.setState({ isMenuOpened: !this.state.isMenuOpened });
   }
-
 }
-````
+```
 
 ## Components
 
 ### `OffCanvas`
 
 This is the main component you will be using to compose your body and menu.
 
-| Prop | Type | Default | Description |
-| :--- | :--- | :--- | :--- |
-| `width` | `number` | 250 | The width of the menu and off-canvas transition. |
-| `transitionDuration` | `number` | 250 | The time in ms for the transition. |
-| `isMenuOpened` | `bool` | false | Is the menu opened or not. |
-| `position` | `string` | "left" | Position the menu to the "left" or "right". |
+| Prop                 | Type     | Default | Description                                               |
+| :------------------- | :------- | :------ | :-------------------------------------------------------- |
+| `width`              | `number` | 250     | The width of the menu and off-canvas transition.          |
+| `transitionDuration` | `number` | 250     | The time in ms for the transition.                        |
+| `isMenuOpened`       | `bool`   | false   | Is the menu opened or not.                                |
+| `position`           | `string` | "left"  | Position the menu to the "left" or "right".               |
+| `effect`             | `string` | "push"  | Position the menu to the "push", "overlay" or "parallax". |
 
 ### `OffCanvasBody`
 
-| Prop | Type | Default | Description |
-| :--- | :--- | :--- | :--- |
-| `width` | `number` | 250 | The width of the menu and off-canvas transition. |
-| `transitionDuration` | `number` | 250 | The time in ms for the transition. |
-| `isMenuOpened` | `bool` | false | Is the menu opened or not. |
-| `position` | `string` | "left" | Position the menu to the "left" or "right". |
-| `className` | `string` | | Custom className for the element. |
-| `style` | `object` | | CSS style object for the element. |
+| Prop                 | Type     | Default | Description                                      |
+| :------------------- | :------- | :------ | :----------------------------------------------- |
+| `width`              | `number` | 250     | The width of the menu and off-canvas transition. |
+| `transitionDuration` | `number` | 250     | The time in ms for the transition.               |
+| `isMenuOpened`       | `bool`   | false   | Is the menu opened or not.                       |
+| `position`           | `string` | "left"  | Position the menu to the "left" or "right".      |
+| `className`          | `string` |         | Custom className for the element.                |
+| `style`              | `object` |         | CSS style object for the element.                |
 
 ### `OffCanvasMenu`
 
-| Prop | Type | Default | Description |
-| :--- | :--- | :--- | :--- |
-| `width` | `number` | 250 | The width of the menu and off-canvas transition. |
-| `transitionDuration` | `number` | 250 | The time in ms for the transition. |
-| `isMenuOpened` | `bool` | false | Is the menu opened or not. |
-| `position` | `string` | "left" | Position the menu to the "left" or "right". |
-| `className` | `string` | | Custom className for the element. |
-| `style` | `object` | | CSS style object for the element. |
+| Prop                 | Type     | Default | Description                                      |
+| :------------------- | :------- | :------ | :----------------------------------------------- |
+| `width`              | `number` | 250     | The width of the menu and off-canvas transition. |
+| `transitionDuration` | `number` | 250     | The time in ms for the transition.               |
+| `isMenuOpened`       | `bool`   | false   | Is the menu opened or not.                       |
+| `position`           | `string` | "left"  | Position the menu to the "left" or "right".      |
+| `className`          | `string` |         | Custom className for the element.                |
+| `style`              | `object` |         | CSS style object for the element.                |