react-bootstrap-dropdown-menu - npm

A simple Dropdown Menu for React. Commonly used as a user 'Settings' menu on websites where users login.. Latest version: 1.1.23, ... react-bootstrap-dropdown-menu1.1.23 • Public • PublishedayearagoReadmeExploreBETA0Dependencies0Dependents48Versions 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 css Object No SeeCssbelow Objectaswithattributesasdescribedbelow CSSasJSvariablestobeoverridden 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) iconColor String No #000000(Black) Any6digithexvalue(e.g.#F4E3A2) ThecoloroftheBootstrapicon fadeIn Boolean No false trueorfalse Dropdownmenuwillfadeinwhensettotrue onMouseover Function No undefined AFunction AfunctionthatwillfirewhenthemousepointerhoversovertheDropdownMenutrigger onMouseout Function No undefined AFunction AfunctionthatwillfirewhenthemousepointermovesawayfromtheDropdownMenutrigger MenuItemprops Name Type Required Default PossibleValues Description type String No undefined separator Ahorizontalrule.textpropisnotrequiredwhenusingthistype. text String Yes undefined AnyStringvalue TextvalueoftheLinkintheMenuItem disabled Boolean No false trueorfalse DisablesaMenuItem location String No undefined AnyStringvalue Anabsoluteorrelativepath linkStyle Object No inherited Hashcontainingjavascriptstyles(notCSS).Seeexamplesformoreinfo onClick Function No undefined AFunction AfunctionthatwillfirewhentheMenuItemLinkisclicked CssOverride ThefollowingCSS(asJS)canbepassedtotheDropdownMenuviathecssproptooverridecolor,paddingetc.NOTE:separatoronlyappliestothechildMenuItemcomponent. constcssAsJs={ gear:{ fontSize:'1.7em', cursor:'pointer', color:'black', padding:'14px', border:'none' }, triangle:{ fontSize:'0.9em', cursor:'pointer', color:'#000000', padding:'14px', border:'none' }, imageTrigger:{ height:'50px', width:'50px', cursor:'pointer', padding:'3px', border:'none' }, textTrigger:{ cursor:'pointer', padding:'14px', border:'none', fontWeight:'bold' }, menuContent:{ backgroundColor:'#f9f9f9', minWidth:'180px', padding:'12px', boxShadow:'0px8px16px0pxrgba(0,0,0,0.2)' }, separator:{ width:'90%', borderTop:'1pxsolidlight-grey' } } DownloadExamples gitclonehttps://github.com/grizzthedj/react-bootstrap-dropdown-menu.git cdreact-bootstrap-dropdown-menu npminstall gulpdemo Browsehttp://localhost:8080 Backlog MoreErrorhandling. ExtendCSSstylingsothatuserdefinedstylescanbepassedinasprops. KeywordsreactdropdownsettingsmenuInstallnpmireact-bootstrap-dropdown-menuRepositoryGitgithub.com/grizzthedj/react-bootstrap-dropdown-menuHomepagegrizzthedj.github.io/react-bootstrap-dropdown-menu/demo/publicDownloadsWeeklyDownloads667Version1.1.23LicenseISCUnpackedSize31.1kBTotalFiles9LastpublishayearagoCollaboratorsTryonRunKitReportmalware