Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/trendmicro-frontend/react-sidenav
React SideNav component
https://github.com/trendmicro-frontend/react-sidenav
navigation react side sidenav
Last synced: about 1 month ago
JSON representation
React SideNav component
- Host: GitHub
- URL: https://github.com/trendmicro-frontend/react-sidenav
- Owner: trendmicro-frontend
- License: mit
- Created: 2017-12-08T09:16:36.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-09-22T14:12:30.000Z (12 months ago)
- Last Synced: 2024-07-22T23:56:16.795Z (about 2 months ago)
- Topics: navigation, react, side, sidenav
- Language: JavaScript
- Homepage: https://trendmicro-frontend.github.io/react-sidenav/
- Size: 1.29 MB
- Stars: 349
- Watchers: 12
- Forks: 105
- Open Issues: 43
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - reacr-sidenav - React SideNav component ([demo](https://trendmicro-frontend.github.io/react-sidenav/)). (Trend Micro / React Components)
README
# 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
These examples make use of font-awesome.
```jsx
{
// Add your code here
}}
>
Home
Charts
Line Chart
Bar Chart
```
### React Router v4 with React v16
```jsx
(
{
const to = '/' + selected;
if (location.pathname !== to) {
history.push(to);
}
}}
>
Home
Devices
} />
} />
} />
)}
/>
```
### 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
{
this.setState({ expanded: false });
}}
>
{
this.setState({ expanded });
}}
>
Home
```
## 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