JSPM – react-bootstrap-dropdown-menu@1.0.10

Package Exports

react-bootstrap-dropdown-menu

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-bootstrap-dropdown-menu) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

A simple Dropdown Menu for React. Commonly used as a 'User Settings' menu on websites where users login.

Installation

npm install react-dropdown-menu --save

Include bootstrap in your project(if not already there)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="all">

Usage

A simple example using OnClick events. Download and run the demo for more examples.

import React from 'react';
import { DropdownMenu, MenuItem } from 'react-bootstrap-dropdown-menu';

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="Foo Bar">
        <MenuItem key="1" text="Home" location="/home" />
        <MenuItem key="2" text="Edit Profile" location="/profile" />
        <MenuItem key="3" text="Change Password" location="/change-password" />
        <MenuItem key="4" text="Delete Account" onClick={this.deleteAccount} />
        <MenuItem key="5" text="Logout" onClick={this.logout} />
      </DropdownMenu>
    );
  }
}

export default SettingsMenu;

Download Examples

git clone https://github.com/grizzthedj/react-bootstrap-dropdown-menu.git
cd react-bootstrap-dropdown-menu
npm install
gulp demo
Browse http://localhost:8080

Backlog

Error handling
Implement a trigger that can be text or an image and passed in via props.
Extend CSS styling so that user defined styles can be passed as props.

Known Bugs

Having 2(or more) instances on same page will cause the second, and all subsequent instances to not collapse when clicking outside of the menu. This is not an issue when there is only a single instance.