react-butterfly-button
Split button overlaid on an image
MIT License
Ecosystems:
JavaScript
react-butterfly-button
Installation
You can use yarn or npm to install this module
$ npm install --save react-butterfly-button
# or
$ yarn add react-butterfly-button --save
Get started
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);
Props
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 |
Remarks
data-wing2-* is only required when using left-right and top-bottom split.
Button types and split styles
ButterflyButton also provides some helpers to make easier configuration as follows.
import ButterflyButton, { TB, LR, C } from 'react-butterfly-button';
Button types
| Type | Description |
|---|---|
TB |
top-bottom split |
LR |
left-right split |
C |
no split |
Split styles
| 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) |
Development
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 |
Credits
- Icon made by Madebyoliver from www.flaticon.com