Split button overlaid on an image
npm install react-butterfly-buttonreact-butterfly-button
===========

You can use yarn or npm to install this module
``sh`
$ npm install --save react-butterfly-buttonor
$ yarn add react-butterfly-button --save
ButterflyButton is a react component that renders a split button overlaid on an image. The button can be customized using the props defined in the next section. The following shows how simple it can be created.
`jsx
import React, { Component } from 'react';
import ButterflyButton, { TB, LR, C } from 'react-butterfly-button';
class App extends Component {
render() {
return (
data-image-src='http://image.flaticon.com/icons/svg/136/136530.svg'
data-wing1-icon-class='fa fa-remove'
data-wing1-onclick={() => alert('click wing1')}
data-wing2-icon-class='fa fa-remove'
data-wing2-onclick={() => alert('click wing2')}
/>
);
}
}
ReactDOM.render(
`
ButterflyButton can be customized by using the following.
Properties | Type | Description
----------------------- | --------- | -----------
size | string | size of the button, default to 4emtype | string | a button typedata-image-src | string | image linkdata-transition | string | transition time when mouse is hovered, default to 0.5sdata-wing1-icon-class | string | font awesome class for left/top split (e.g. fa fa-remove)data-wing1-onclick | function| callback function for onClick handling on left/top splitdata-wing1-style | object | a split styledata-wing2-icon-class | string | font awesome class for right/bottom split (e.g. fa fa-remove)data-wing2-onclick | function| callback function for onClick handling on right/bottom splitdata-wing2-style | object | right/bottom split style
data-wing2-* is only required when using left-right and top-bottom split.
ButterflyButton also provides some helpers to make easier configuration as follows.
`js`
import ButterflyButton, { TB, LR, C } from 'react-butterfly-button';
Type | Description
-------- | ------------
TB | top-bottom splitLR | left-right splitC | no split
Prop | Type | Description
----------------------- | --------- | -----------
backgroundColor | string | background color of split (css's background-color)fontColor | string | font color of split (css's color)fontSize | string | font size of split (css's font-size)
After cloning and running npm install, you can use the following npm commands for easier development:
Command | Description
--------------- | -----------
npm test | run test suitenpm run build` | build the module
- Icon made by Madebyoliver from www.flaticon.com