A simple dropdown menu for React with Bootstrap icon trigger

Include bootstrap in your project(if not already included) ... React from 'react'; import { DropdownMenu, MenuItem } from 'react-bootstrap-dropdown-menu'; ... Home AsimpledropdownmenuforReactwithBootstrapicontrigger AsimpledropdownmenuforReactwithBootstrapicontrigger AsimpleDropdownMenuforReact.Commonlyusedasa'UserSettings'menuonwebsiteswhereuserslogin. GithubRepo react-bootstrap-dropdown-menu AsimpleDropdownMenuforReact.Commonlyusedasa'UserSettings'menuonwebsiteswhereuserslogin. Installation npminstallreact-bootstrap-dropdown-menu--save Includebootstrapinyourproject(ifnotalreadyincluded) Usage AsimpleexampleusingOnClickevents.Downloadandrunthedemoformoreexamples,orbrowsetheexamples. importReactfrom'react'; import{DropdownMenu,MenuItem}from'react-bootstrap-dropdown-menu'; classSettingsMenuextendsReact.Component{ constructor(){ super(); this.deleteAccount=this.deleteAccount.bind(this); this.logout=this.logout.bind(this); } deleteAccount(e){ console.log("DeletingAccount") } logout(e){ console.log("Loggingout") } render(){ return( ); } } exportdefaultSettingsMenu; DropdownMenuprops Name Type Required Default PossibleValues Description userName String No undefined Anystring(e.g.'JohnDoe') Whenprovided,willrender'Loggedinas:{userName}'inthetopMenuItem position String No right left,center,right Changesthemenu'shorizontaldroppositionrelativetothetrigger triggerType String No icon icon,text,image TheTypeofdroptrigger trigger String No glyphiconglyphicon-cog DependsontriggerType For'icon'triggerType:Anybootstrapglyphicon(http://getbootstrap.com/components/)For'text'triggerType:AnyStringcanbeusedFor'image'triggerType:Pathtoimage(e.g."/images/myimage.png") triggerWidth String No 50px(onlyappliestotriggerType='image') Anynumericvaluewith'px'appended(e.g.'45px') Thewidthtorendertheimagetriggerimage. triggerHeight String No 50px(onlyappliestotriggerType='image') Anynumericvaluewith'px'appended(e.g.'45px') Theheighttorendertheimagetriggerimage. caratColor String No #000000(Black) Any6digithexvalue(e.g.#F4E3A2) ThecoloroftheDropDowncarat(fortriggerType'image'and'text'only) fadeIn Boolean No false trueorfalse Dropdownmenuwillfadeinwhensettotrue MenuItemprops Name Type Required Default PossibleValues Description type String No undefined separator Ahorizontalrule.textpropisnotrequiredwhenusingthistype. text String Yes undefined AnyStringvalue TextvalueoftheLinkintheMenuItem location String No undefined AnyStringvalue Anabsoluteorrelativepath linkStyle Object No inherited Hashcontainingjavascriptstyles(notCSS).Seeexamplesformoreinfo onClick Function No undefined AFunction AfunctionthatwillfirewhentheMenuItemLinkisclicked DownloadExamples gitclonehttps://github.com/grizzthedj/react-bootstrap-dropdown-menu.git cdreact-bootstrap-dropdown-menu npminstall gulpdemo Browsehttp://localhost:8080 Backlog MoreErrorhandling. ExtendCSSstylingsothatuserdefinedstylescanbepassedinasprops. GithubRepository Tags:#React#Menu #Dropdown #Bootstrap FeatureTogglesforReactProjects Asimpleimage/picturesliderforreact