Split button overlaid on an image
MIT License
You can use yarn or npm to install this module
$ npm install --save react-butterfly-button
# or
$ 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.
import React, { Component } from 'react';
import ButterflyButton, { TB, LR, C } from 'react-butterfly-button';
class App extends Component {
render() {
return (
<ButterflyButton
type={LR}
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(<App />, document.body);
ButterflyButton
can be customized by using the following.
Properties | Type | Description |
---|---|---|
size |
string |
size of the button, default to 4em
|
type |
string |
a button type |
data-image-src |
string |
image link |
data-transition |
string |
transition time when mouse is hovered, default to 0.5s
|
data-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 split |
data-wing1-style |
object |
a split style |
data-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 split |
data-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.
import ButterflyButton, { TB, LR, C } from 'react-butterfly-button';
Type | Description |
---|---|
TB |
top-bottom split |
LR |
left-right split |
C |
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 suite |
npm run build |
build the module |