npm

Bring the best of OSS JavaScript development to your projects with npm Orgs - private packages & team management tools.Learn more »

react-split-button

1.0.1 • Public • Published

react-split-button

A carefully crafted split-button for React

See split-button demo

Install

$ npm install react-split-button --save

Description

The split-button is similar to the dropdown button, but also enables a default action on the button, without showing the drop-down menu.

The split button smartly positions the drop-down menu to fit into the document. You can customize how the menu is aligned to the button. With one function, you can respond to a click in the menu at any nesting level.

Worth trying out, see the demo page

Changelog

See Changelog

Usage

 
var SplitButton = require('react-split-button')
 
var items = [
    {
        label: 'save as',
        onClick: function(){
            console.log('saved as')
        },
        items: [
            {
                label: 'PDF',
                onClick: function(){
                    console.log('save as PDF')
                }
            },
            {
                label: 'Postscript'
            }
        ]
    },
    {
        label: 'export',
        onClick: function(){
            console.log('exported')
        }
    },
]
 
function save(){
    console.log('SAVED!')
}
 
<SplitButton items={items} onClick={save}>
    Save
</SplitButton>
 
function onMenuClick(event, itemProps){
    console.log('You clicked ', itemProps.data.label)
}
 
<SplitButton items={items} onMenuClick={onMenuClick} onClick={save}>
    Save
</SplitButton>

Properties

The split button is implemented as two buttons, one next to the other (named button and arrow from now on). The arrow button is just a react-dropdown-button

Actions

  • onClick: Function - function to be called when the button is clicked (not the arrow!)
  • onToggle: Function(pressed: boolean) - function to be called when the button is toggled
  • onArrowClick: Function - function to be called when the arrow is clicked
  • onMenuClick: Function(event, itemProps) - a function to be called when a menu item is clicked

Menu-related attributes

  • items - an array of menu items to build the menu
  • menu - you can specify a menu instead of the menu items

Other attributes

  • href - href for the button

  • align - applied to the button

  • label - applied to the button

  • disabled - applied to the button and the arrow

  • pressed - applied to the button

  • defaultPressed - applied to the button

  • theme - a theme to apply the button and the arrow. See buttom styling

  • buttonProps - props for the button

  • arrowProps - props for the arrow

  • commonProps - props for both the button and the arrow

  • buttonStyle

  • arrowStyle

  • commonStyle - styles to be applied to both the arrow and the button

Contributing

$ npm install
$ npm run dev # to start webpack-dev-server 
$ npm run serve # to start http-server on port 9091 

now navigate to localhost:9091

Roadmap

See Roadmap

License

MIT

install

npm i react-split-button

Downloadsweekly downloads

17

version

1.0.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability