react-sidenav-menu
Version:
205 lines (172 loc) • 6.86 kB
Markdown
# react-sidenav [](https://travis-ci.org/trendmicro-frontend/react-sidenav) [](https://coveralls.io/github/trendmicro-frontend/react-sidenav?branch=master)
[](https://nodei.co/npm/@trendmicro/react-sidenav/)
React SideNav
Demo: https://trendmicro-frontend.github.io/react-sidenav
## Installation
1. Install the latest version of [react](https://github.com/facebook/react) and [react-sidenav](https://github.com/trendmicro-frontend/react-sidenav):
```
npm install --save react @trendmicro/react-sidenav
```
2. At this point you can import `@trendmicro/react-sidenav` and its styles in your application as follows:
```js
import SideNav, { Toggle, Nav, NavItem, NavIcon, NavText } from '@trendmicro/react-sidenav';
// Be sure to include styles at some point, probably during your bootstraping
import '@trendmicro/react-sidenav/dist/react-sidenav.css';
```
## Usage
```jsx
<SideNav
onSelect={(selected) => {
// Add your code here
}}
>
<SideNav.Toggle />
<SideNav.Nav defaultSelected="home">
<NavItem eventKey="home">
<NavIcon>
<i className="fa fa-fw fa-home" style={{ fontSize: '1.75em' }} />
</NavIcon>
<NavText>
Home
</NavText>
</NavItem>
<NavItem eventKey="charts">
<NavIcon>
<i className="fa fa-fw fa-line-chart" style={{ fontSize: '1.75em' }} />
</NavIcon>
<NavText>
Charts
</NavText>
<NavItem eventKey="charts/linechart">
<NavText>
Line Chart
</NavText>
</NavItem>
<NavItem eventKey="charts/barchart">
<NavText>
Bar Chart
</NavText>
</NavItem>
</NavItem>
</SideNav.Nav>
</SideNav>
```
### React Router v4 with React v16
```jsx
<Router>
<Route render={({ location, history }) => (
<React.Fragment>
<SideNav
onSelect={(selected) => {
const to = '/' + selected;
if (location.pathname !== to) {
history.push(to);
}
}}
>
<SideNav.Toggle />
<SideNav.Nav defaultSelected="home">
<NavItem eventKey="home">
<NavIcon>
<i className="fa fa-fw fa-home" style={{ fontSize: '1.75em' }} />
</NavIcon>
<NavText>
Home
</NavText>
</NavItem>
<NavItem eventKey="devices">
<NavIcon>
<i className="fa fa-fw fa-device" style={{ fontSize: '1.75em' }} />
</NavIcon>
<NavText>
Devices
</NavText>
</NavItem>
</SideNav.Nav>
</SideNav>
<main>
<Route path="/" exact component={props => <RootComponent />} />
<Route path="/home" component={props => <Home />} />
<Route path="/devices" component={props => <Devices />} />
</main>
</React.Fragment>
)}
/>
</Router>
```
### Close the side navigation menu when clicking outside
You can find a click-outside React component (https://github.com/tj/react-click-outside/blob/master/index.js) and do something below:
```jsx
<ClickOutside
onClickOutside={() => {
this.setState({ expanded: false });
}}
>
<SideNav
expanded={this.state.expanded}
onToggle={(expanded) => {
this.setState({ expanded });
}}
>
<SideNav.Toggle />
<SideNav.Nav defaultSelected="home">
<NavItem eventKey="home">
<NavIcon>
<i className="fa fa-fw fa-home" style={{ fontSize: '1.75em' }} />
</NavIcon>
<NavText>
Home
</NavText>
</NavItem>
</SideNav.Nav>
</SideNav>
</ClickOutside>
```
## API
### Properties
#### SideNav
Name | Type | Default | Description
:--- | :--- | :------ | :----------
componentClass | element | 'nav' | A custom element for this component.
disabled | boolean | | Whether the navigation toggle is disabled.
expanded | boolean | | Whether the side navigation is expanded or collapsed.
onToggle | function(boolean) | | Callback fired when toggling the side navigation between expanded and collapsed state.
onSelect | function(eventKey, event) | | Callback fired when a navigation item is selected.
#### Toggle
Name | Type | Default | Description
:--- | :--- | :------ | :----------
componentClass | element | 'button' | A custom element for this component.
disabled | boolean | false | Whether the navigation toggle is disabled.
expanded | boolean | false | Whether the side navigation is expanded or collapsed.
#### Nav
Name | Type | Default | Description
:--- | :--- | :------ | :----------
componentClass | element | 'div' | A custom element for this component.
onSelect | function(eventKey, event) | | Callback fired when a navigation item is selected.
selected | any | | The selected navigation item.
defaultSelected | any | | The initially selected navigation item.
expanded | boolean | false | Whether the side navigation is expanded or collapsed.
#### NavItem
Name | Type | Default | Description
:--- | :--- | :------ | :----------
componentClass | element | 'div' | A custom element for this component.
active | boolean | false | Highlight the navigation item as active.
disabled | boolean | false | Disable the navigation item, making it unselectable.
expanded | boolean | false | Whether the navigation item is expanded or collapsed.
eventKey | any | _(required)_ | Value passed to the `onSelect` handler, useful for identifying the selected navigation item.
onClick | function(event) | | Callback fired when the navigation item is clicked.
onSelect | function(eventKey, event) | | Callback fired when a navigation item is selected.
navitemClassName | | |
navitemStyle | | |
subnavClassName | | |
subnavStyle | | |
#### NavIcon
Name | Type | Default | Description
:--- | :--- | :------ | :----------
children | any | |
#### NavText
Name | Type | Default | Description
:--- | :--- | :------ | :----------
children | any | |
## License
MIT