React SideNav
npm install @trendmicro/react-sidenav
React SideNav
Demo: https://trendmicro-frontend.github.io/react-sidenav
1. Install the latest version of react and 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';
`
These examples make use of font-awesome.
`jsx`
// Add your code here
}}
>
Home
Charts
Line Chart
Bar Chart
`jsx`
const to = '/' + selected;
if (location.pathname !== to) {
history.push(to);
}
}}
>
Home
Devices
)}
/>
You can find a click-outside React component (https://github.com/tj/react-click-outside/blob/master/index.js) and do something below:
`jsx`
this.setState({ expanded: false });
}}
>
onToggle={(expanded) => {
this.setState({ expanded });
}}
>
Home
#### 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 | |
MIT