react-butterfly-button v1.0.0

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.

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

Split styles

Development

After cloning and running npm install, you can use the following npm commands for easier development:

Credits

• Icon made by Madebyoliver from www.flaticon.com