Description:
Create simple and beautiful Bootstrap drop-down menu for your React project. It will work just like a user setting drop-down menu on the top right. The drop-down menu will open on ‘Click’ event.
How to use it?
1. Install the component with npm.
npm install react-bootstrap-dropdown-menu –save
2. Include the Bootstrap library if not included in your project.
<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css” rel=”stylesheet” media=”all”>
3. Import the component.
import React from ‘react’;
import { DropdownMenu, MenuItem } from ‘react-bootstrap-dropdown-menu’;
4. Create the drop-down menu as following.
class SettingsMenu extends React.Component {
constructor() {
super();
this.deleteAccount = this.deleteAccount.bind(this);
this.logout = this.logout.bind(this);
}
deleteAccount(e) {
console.log(“Deleting Account”)
}
logout(e) {
console.log(“Logging out”)
}
render() {
return (
<DropdownMenu userName=”Chris Smith”>
<MenuItem text=”Home” location=”/home” />
<MenuItem text=”Edit Profile” location=”/profile” />
<MenuItem text=”Change Password” location=”/change-password” />
<MenuItem text=”Privacy Settings” location=”/privacy-settings” />
<MenuItem text=”Delete Account” onClick={this.deleteAccount} />
<MenuItem text=”Logout” onClick={this.logout} />
</DropdownMenu>
);
}
}
export default SettingsMenu;
The post A Simple Bootstrap Drop-down Menu For React appeared first on Lipku.com.
