A carefully crafted split-button for React
npm install react-split-buttonreact-split-button
==================
> A carefully crafted split-button for React
``sh`
$ npm install react-split-button --save
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
See Changelog
`jsx
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!')
}
Save
function onMenuClick(event, itemProps){
console.log('You clicked ', itemProps.data.label)
}
Save
`
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
* 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
* items - an array of menu items to build the menu
* menu - you can specify a menu instead of the menu items
* 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
`sh``
$ 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
See Roadmap
#### MIT