react-ladda

React wrapper for Ladda buttons.

Installation

react-ladda can be installed directly through npm:

$ npm install --save react-ladda

Usage

LaddaButton is a component that can be wrapped around a button DOM element:

/** @jsx React.DOM */

React = require('react');
LaddaButton = require('react-ladda');

App = React.createClass({
  displayName: 'App',

  getInitialState: function() {
    return {active: false};
  },

  toggle: function() {
    this.setState({active: !this.state.active});
  },

  render: function() {
    return (
      <LaddaButton active={this.state.active}>
        <button onClick={this.toggle}>Click here</button>
      </LaddaButton>
    );
  }
});

React.render(<App />, document.body);

All of the options for ladda buttons are supported:

<LaddaButton
    active={true}
    progress={0.5}
    color="#eee"
    size="xl"
    spinnerSize={30}
    spinnerColor="#ddd"
    style="slide-up">
  <button>Click here</button>
</LaddaButton>