react-buttons

react-buttons

A few common buttons with css and helpers.

Live example: react-buttons

Installation

$ npm install -S react-buttons

Include the css file or import the sass file

// symlink way
@import "vendors/react-buttons/react-buttons";

// or
@import "../some/path/to/node_modules/react-buttons/src/scss/react-buttons";

I personally prefer the symlink way. You can checkout my postinstall script for an example.

Each component can be disabled and not inluded in your compiled source by changing the variables $include-x Check the sass source

Example

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PureRenderMixin from 'react-addons-pure-render-mixin';

import { Button, IconButton, HamburgerButton, FloatingButton, FlatButton } from 'react-buttons';

class Example extends Component {
  constructor(props) {
    super(props);

    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
  }

  render() {
    return (
      <div>
        <Button faIcon="plus" onClick={/* sommething */}>New Thing</Button>
        <Button materialIcon="favorite" iconBefore={true} onClick={/* sommething */}>Favorite</Button>
        
        <IconButton faIcon="plus" label="Add a new thing" onClick={/* something */} />
        <IconButton materialIcon="favorite" label="Add this as a favorite" onClick={/* something */} />

        <HamburgerButton active={false} size="lg" onClick={/* something */} />
        <HamburgerButton active={this.props.btnActive} onClick={/* toggle */} />

        <FlatButton color="primary" onClick={/* something */} />

        <FloatingButton faIcon="plus" label="Add a new thing" onClick={/* something */} />
      </div>
    )
  }
}

ReactDOM.render(<Example />, document.getElementById('app'));

Check out the examples folder or the live demo for other ideas.

React Components

Button

This is just a basic button that helps with placing icons on a button before or after the text.

  static propTypes = {
    iconBefore: PropTypes.bool,
    faIcon: PropTypes.string,
    materialIcon: PropTypes.string,
    type: PropTypes.oneOf(['button', 'submit', 'reset']),
    className: PropTypes.string,
    onClick: PropTypes.func,
    children: PropTypes.node,
    ripple: PropTypes.bool,
    rippleTime: PropTypes.number,
  }

  static defaultProps = {
    iconBefore: false,
    type: 'button',
    onClick: () => {},
    ripple: false,
    rippleTime: 300,
  }

When giving a font-awesome icon, do not pass in 'fa fa-whatever'. All that is needed is 'whatever'.

There is a corresponding css class names .icon-text-btn that gets applied to this button that adds a margin to icons and their text.

There can be a ripple effect on the button if you change the value of ripple to true. You just need a background color on the button to work.

IconButton

This is a button that is only an icon with no text. There is some attempted accessibility built into this component as well. If you hover over the button, help text will appear describing what that button should be doing.

  static propTypes = {
    label: PropTypes.string.isRequired,
    helpPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
    faIcon: PropTypes.string,
    materialIcon: PropTypes.string,
    type: PropTypes.oneOf(['button', 'reset', 'submit']),
    helpTextTime: PropTypes.number,
    onClick: PropTypes.func,
    className: PropTypes.string,
    children: PropTypes.node,
  }

  static defaultProps = {
    helpPosition: 'bottom',
    type: 'button',
    helpTextTime: 1000,
    onClick: () => {},
  }

The prop label is used as the text for the help text.

The prop helpPosition is used to tell which side of the button the floating-box of text will appear

The corresponding css class name is .icon-btn. The help text extends a class floating-box.

HamburgerButton and FloatingButton both use IconButton and pass all props into it. So the propTypes here are valid for them as well.

HamburgerButton

This is just a pretty hamburger button that has the lines move into an X if you change the prop active to true.

  static propTypes = {
    active: PropTypes.bool,
    label: PropTypes.string.isRequired,
    helpPosition: PropTypes.oneOf(['top', 'left', 'bottom', 'right']),
    onClick: PropTypes.func,
    className: PropTypes.string,
    size: PropTypes.string,
  }

  static defaultProps = {
    active: false,
    size: 'md',
    helpPosition: 'bottom',
  }

The hamburger button is generated with some css and the corresponding class is .hamburger-btn.

Since modifying the colors and changing the sizes is a bit of work, there are 3 sass mixins available. hamburger-size, hamburger-color, hamburger-position

So if you wanted to create a new alternative color button,

.hamburger-btn.hamburger-btn-blue {
  $background-color: #3498dbl
  $line-color: #ecf0f1;
  @include hamburger-color($background-color, $line-color);
}

.hamburger-btn.hamburger-btn-xs {
  $icon-size: 12px;
  $line-size: 2px;
  @include hamburger-size($icon-size, $line-size);
  @include hamburger-position($icon--size, $line-size);
}

I can't promise that custom sizes always work correctly. Even numbers usually worked ok.

FlatButton

Creates a 'flat' button that presses down when clicked.

  static propTypes = {
    color: PropTypes.string,
    active: PropTypes.bool,
    className: PropTypes.string,
  }

  static defaultProps = {
    color: 'default',
    active: false,
  }

The color is any string that you want to add to the end of flat-btn-. There are 3 types available at the start default, primary, error.

There is a mixin you can use to create a new button color alternative flat-btn

.flat-btn {
  
  $name: 'irock',
  $background-color: #95a5a6; // concrete
  $text-color: #000;
  $border-color: #7f8c8d; // asbestos
  $border-size: $flat-btn-border-size;
  @include($name, $background-color, $text-color, $border-color, $border-size);
}

// creates
.flat-btn.flat-btn-irock {
  background-color: #95a5a6;
  color: #000
  border-bottom: 2px solid #7f8c8d;

  box-shadow: inset 0 -2px #7f8c8d;
}

FloatingButton

This is just a button that floats in the bottom right hand corner of the screen.

  static propTypes = {
    color: PropTypes.string,
    className: PropTypes.string,
  }

  static defaultProps = {
    color: 'default',
    helpPosition: 'left',
  }

The color is any string that you want to add to the end of floating-btn-. There are 3 types available at the start default, primary, error.

There is no mixin for this one because it is easy enough to create your own here.

.floating-box / .help-text

There is a reusable relative menu named .floating-box. View src/scss/_helpers.scss for more.

Helper functions

There are 2 helper functions for creating ripple effects if you do not want to use the buttons here.

import React from 'react';
import ReactDOM from 'react-dom';
import { initRipple, animateRipple } from 'react-buttons';

export default class RippleButton extends Component {
  constructor(pros) {
    super(props);

    this.ripple = null;
    this.rippleTimeout = null;
  }

  componentDidMount() {
    this.ripple = initRipple(ReactDOM.findDOMNode(this));
  }

  componentWillUnmount() {
    if(this.rippleTimeout) {
      clearTimeout(this.rippleTimeout);
    }
  }

  onClick = (e) => {
    this.rippleTimeout = animateRipple(e, ReactDOM.findDOMNode(this), this.ripple, this.rippleTimeout);
  }

  render() {
    return <button type="button" onClick={this.onClick}>I Am a Ripple Button</button>;
  }
}

Development

To run the local build and check for changes in the examples,

$ npm start

# or

$ gulp serve

To build for a release

$ npm run build

# or

$ gulp dist