0.4.2 • Published 6 years ago
side-menu v0.4.2
A React side-menu component.
Usage
Here is a quick example to get you started, it's all you need:
This component uses icons from Font Awesome, but it does not include any of the Font Awesome CSS or fonts, so you'll need to make sure to include those on your end somehow, either by adding them to your build process or linking to CDN versions.
import React, {Component} from 'react';
import {BrowserRouter as Router} from 'react-router-dom';
import Links from 'path/to/links';
import SideMenu from 'SideMenu';
class App extends Component {
handleLinkSelect = link =>
console.log(link); //{id, name, url}
render() {
return (
<Router> //added somewhere on your project
<div>
<SideMenu
links={Links}
onSelectLink={this.handleLinkSelect}
/>
</div>
</Router>
);
}
}
export default App;
Props
links: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
url: PropTypes.string.isRequired,
icon: PropTypes.string.isRequired, //font awesome icon name
badge: PropTypes.number
})).isRequired,
position: PropTypes.string, //left or right
onSelectLink: PropTypes.func.isRequired
Links array example
export default [{
id: 1,
name: 'rocket',
url: '/app/rocket',
icon: 'rocket'
}, {
id: 2,
name: 'bomb',
url: '/app/bomb',
icon: 'bomb',
badge: 2
}, {
id: 3,
name: 'coffee',
url: '/app/coffee',
icon: 'coffee'
}];
0.4.2
6 years ago
0.4.1
6 years ago
0.4.0
6 years ago
0.3.12
7 years ago
0.3.11
7 years ago
0.3.10
7 years ago
0.3.9
7 years ago
0.3.8
7 years ago
0.3.7
7 years ago
0.3.6
7 years ago
0.3.5
7 years ago
0.3.4
7 years ago
0.3.3
7 years ago
0.3.2
7 years ago
0.3.1
7 years ago
0.3.0
7 years ago
0.2.0
7 years ago
0.1.4
7 years ago
0.1.3
7 years ago
0.1.2
7 years ago
0.1.1
7 years ago
0.1.0
7 years ago