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