react-opium-button v0.0.4

react-opium-button

A light-weight react button with inline state indicator.

Codepen demo

Features

• Automatically generates a darker color from a given solid or gradient color for the hover/focus effect
• Hover color can also be provided manually
• Loading indicators with SVG animations
• Optional different text while loading
• Success indicator

Installation

npm i react-opium-button

Usage

Basic example

import React, { Component } from 'react';
import Button from 'react-opium-button';
import 'react-opium-button/style.css';

class App extends Component {
  contructor(props) {
    super(props);
    this.state = { buttonState: 'normal' };
  }

  handleClick() {
    console.log('button clicked');
  }

  render() {
    return (
      <div style={{ margin: '200px auto', maxWidth: '400px' }}>
        <Button
          text="Save"
          padding="10px 50px"
          background="#ee0979"
          color="#ffffff"
          state={this.state.buttonState}
          onClick={this.handleClick} />
      </div>
    );
  }
}

export default App;

Advanced usage

Extend the plugin to make your own settings as default.

// ./myModifiedButton.js
import Button from 'react-opium-button';

class myModifiedButton extends Button {
  static defaultProps = {
    background: '#ff0000',
    color: '#2e2e2e',
    dimensions: '100px 40px',
    border: '2px solid #ff0000',
    rounded: true
  }
}

export default myModifiedButton;

Customizations