JSPM – react-bootstrap-dropdown-menu@1.1.4

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-bootstrap-dropdown-menu --save

Include bootstrap in your project(if not already included)

<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, or browse the examples here

alt tag

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="Chris Smith">
        <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="Privacy Settings" location="/privacy-settings" />
        <MenuItem key="5" text="Delete Account" onClick={this.deleteAccount} />
        <MenuItem key="6" text="Logout" onClick={this.logout} />
      </DropdownMenu>
    );
  }
}

export default SettingsMenu;

DropdownMenu props

Name	Type	Required	Default	Possible Values	Description
userName	String	No	undefined	Any string(e.g. 'John Doe')	When provided, will render 'Logged in as: {userName}' in the top MenuItem
position	String	No	right	left, center, right	Changes the menu's horizontal drop position relative to the trigger
triggerType	String	No	icon	icon, text, image	The Type of drop trigger
trigger	String	No	glyphicon glyphicon-cog	Depends on triggerType	For 'icon' triggerType: Any bootstrap glyphicon(http://getbootstrap.com/components/) For 'text' triggerType: Any String can be used For 'image' triggerType: Path to image(e.g. "/images/myimage.png")

MenuItem props

Name	Type	Required	Default	Possible Values	Description
key	Number	Yes	undefined	Any integer value	Must be unique for each MenuItem. Console errors will result if omitted.
text	String	Yes	undefined	Any String value	Text value of the Link in the MenuItem
location	String	Yes	undefined	Any String value	An absolute or relative path
linkStyle	Object	No	inherited	Hash containing javascript styles(not CSS). See examples for more info
onClick	Function	No	undefined	A Function	A function that will fire when the MenuItem Link is clicked

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

More Error handling.
Handle MenuItem keys internally so that they don't have to be specified.
Extend CSS styling so that user defined styles can be passed in 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.