Merge pull request #13 from gauravchl/gc-updates

v2.0.0
gauravchl · Apr 20, 2020 · 5ffe368 · 5ffe368
2 parents 188d65a + bb7e191
commit 5ffe368
Show file tree

Hide file tree

Showing 13 changed files with 2,839 additions and 595 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1 +1,6 @@
-{"presets": ["env", "react"]}
+{
+    "presets": [
+        "@babel/env",
+        "@babel/preset-react"
+    ]
+}
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 dist
 npm-debug.log
+.DS_Store
diff --git a/README.md b/README.md
@@ -4,108 +4,119 @@ Simple, light weight(4.78 kB), fully customizable React component for side navig
 
 Inspired by [Side Navigation Bar TL;DW episode of Supercharged](https://youtu.be/Mhnj3PiPnZw)
 
-**Demo:**  https://gauravchl.github.io/react-simple-sidenav/demo/
+**Demo:** https://gauravchl.github.io/react-simple-sidenav/demo/
 
 <img width="400" alt="screen shot 2016-07-24 at 2 28 16 pm" src="https://cloud.githubusercontent.com/assets/3471415/17082916/f53e196e-51ab-11e6-84bc-9fc36068c42e.png">
 
-
-
 **Install:**
+
 ```
 npm install react-simple-sidenav
 ```
 
 **Use:**
-```html
-import SideNav from 'react-simple-sidenav';
 
-<SideNav
-  title="Simple Sidenav"
-  items={['Item 1', 'Item 2']}
-  />
+```html
+import SideNav from 'react-simple-sidenav'; <SideNav title="Simple Sidenav" items={['Item 1', 'Item 2']} />
 ```
-**Props:**
-
-Props | Type | Description
-------|------ | -------------
-style | object | Style for root element
-navStyle | object | Style for nav element
-titleStyle | object | Styles for title
-itemStyle  | object | Styles for item
-itemHoverStyle | object | Hover style for item
-title      | node | Will display on top
-items      | [node] | Array of items in navigation list below the title
-showNav | boolean | Control whether to open or close side navigation
-openFromRight | boolean | This opens navigation from right side of the window, default is false (from left side).
-onShowNav | function | Trigger when navigation opens
-onHideNav | function | Trigger when navigation close
-children  | node | Content of navigation. If supplying children to SideNav, title and items will be ignore and replaced by children
-
 
+**Props:**
 
+| Props          | Type     | Description                                                                                                      |
+| -------------- | -------- | ---------------------------------------------------------------------------------------------------------------- |
+| style          | object   | Style for root element                                                                                           |
+| navStyle       | object   | Style for nav element                                                                                            |
+| titleStyle     | object   | Styles for title                                                                                                 |
+| itemStyle      | object   | Styles for item                                                                                                  |
+| itemHoverStyle | object   | Hover style for item                                                                                             |
+| title          | node     | Will display on top                                                                                              |
+| items          | [node]   | Array of items in navigation list below the title                                                                |
+| showNav        | boolean  | Control whether to open or close side navigation                                                                 |
+| openFromRight  | boolean  | This opens navigation from right side of the window, default is false (from left side).                          |
+| onShowNav      | function | Trigger when navigation opens                                                                                    |
+| onHideNav      | function | Trigger when navigation close                                                                                    |
+| children       | node     | Content of navigation. If supplying children to SideNav, title and items will be ignore and replaced by children |
 
 **Examples:**
 
-[with default styles]
-
-```html
-  import react from 'react';
-  import SideNav, {MenuIcon} from 'react-simple-sidenav';
-
-  React.createClass({
-    render() {
-      return(
-        <MenuIcon onClick={() => this.setState({showNav: true})}/>
-
-        <SideNav
-          showNav = {this.state.showNav}
-          onHideNav = {() => this.setState({showNav: false})} />
-      )
-    }
-  })
-
+```javascript
+// With default styles
+import React, { useState } from 'react';
+import SideNav, { MenuIcon } from 'react-simple-sidenav';
+
+const MyComponent = (props) => {
+  const [showNav, setShowNav] = useState();
+
+  return (
+    <div>
+      <MenuIcon onClick={() => setShowNav(true)} />
+      <SideNav showNav={showNav} onHideNav={() => setShowNav(false)} />
+    </div>
+  );
+};
 ```
 
-[with custom styles]
-
-```html
-
-  <SideNav
-    showNav        =  {this.state.showNav}
-    onHideNav      =  {() => this.setState({showNav: false})}
-    title          =  "Hello World"
-    items          =  {['home', 'services', 'about', 'contact']}
-    titleStyle     =  {{backgroundColor: '#4CAF50'}}
-    itemStyle      =  {{backgroundColor: '#fff'}}
-    itemHoverStyle =  {{backgroundColor: '#CDDC39'}}
-    />
-
+```javascript
+// With custom styles
+import React, { useState } from 'react';
+import SideNav, { MenuIcon } from 'react-simple-sidenav';
+
+const MyComponent = (props) => {
+  const [showNav, setShowNav] = useState();
+  return (
+    <div>
+      <MenuIcon onClick={() => setShowNav(true)} />{' '}
+      <SideNav
+        showNav={showNav}
+        onHideNav={() => setShowNav(false)}
+        title="Hello World"
+        items={['home', 'services', 'about', 'contact']}
+        titleStyle={{ backgroundColor: '#4CAF50' }}
+        itemStyle={{ backgroundColor: '#fff' }}
+        itemHoverStyle={{ backgroundColor: '#CDDC39' }}
+      />
+    </div>
+  );
+};
 ```
 
-[with custom items]
-
-```html
-  <SideNav
-    showNav={this.state.showNav3}
-    onHideNav={()=>this.setState({showNav3:false})}
-    title={<div>Hello octo <img src='git-mark.png' width='26' /></div>}
-    titleStyle={{backgroundColor: '#2196F3'}}
-    items={[
-      <a target='_blank' href='https://github.com/gauravchl/react-simple-sidenav'>View Source on github</a>,
-      <a target='_blank' href='https://www.npmjs.com/package/react-simple-sidenav'>Install via npm</a>,
-      <a target='_blank' href='https://gauravchl.github.io/react-simple-sidenav/demo/'>demo</a>
-      ]} />
-
-
+```javascript
+// With custom items
+import React, { useState } from 'react';
+import SideNav, { MenuIcon } from 'react-simple-sidenav';
+
+const MyComponent = (props) => {
+  const [showNav, setShowNav] = useState();
+  const navItems = [
+    <a target="_blank" href="someLink">
+      Link1
+    </a>,
+    <a target="_blank" href="someLink">
+      Link2
+    </a>,
+    <a target="_blank" href="someLink">
+      Link3
+    </a>,
+  ];
+
+  const title = <h1>Hello octo </h1>;
+
+  return (
+    <div>
+      <MenuIcon onClick={() => setShowNav(true)} />
+      <SideNav showNav={showNav} onHideNav={() => setShowNav(false)} title={title} items={navItems} />
+    </div>
+  );
+};
 ```
 
 **Contributing:**
 
 Please feel free to submit any bugs or suggestions as issues. Pull requests are welcome.
 To build package locally run following commands which will build the package from source and update the demo inside `react-simple-sidenav/demo/`.
 
-  ```
-  cd /react-simple-sidenav/
-  npm install
-  npm run build
-  ```
+```
+cd /react-simple-sidenav/
+npm install
+npm run build
+```
diff --git a/demo/index.js b/demo/index.js
diff --git a/demo/src/index.jsx → demo/src/index.js b/demo/src/index.jsx → demo/src/index.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Layout from './layout.jsx';
-
+import Layout from './layout.js';
 
 document.addEventListener('DOMContentLoaded', () => {
   ReactDOM.render(<Layout />, document.getElementById('main'));