react-ladda

React wrapper for Ladda buttons.

Installation

react-ladda can be installed directly through npm:

$ npm install --save react-ladda

Compatibility

• Use react-ladda@>=2.0.2 for [email protected]
• Use react-ladda@<2.0.2 for [email protected]

Usage

LaddaButton is a React component that wraps Ladda buttons with additional props for the built-in loading indicators:

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

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

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

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

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

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

All of the Ladda button options are supported through props:

<LaddaButton
    loading={true}
    progress={0.5}
    buttonColor="#eee"
    buttonSize="xl"
    buttonStyle="slide-up"
    spinnerSize={30}
    spinnerColor="#ddd">Click here</LaddaButton>