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