rl

react-ladda

React wrapper for Ladda buttons.

Showing:

Popularity

Downloads/wk

6.2K

GitHub Stars

295

Maintenance

Last Commit

3yrs ago

Contributors

16

Package

Dependencies

2

Size (min+gzip)

5.2KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

react-ladda

Build Status Dependency Status NPM version Code Climate

A React wrapper for Ladda buttons. Example

Installation

react-ladda can be installed directly through npm:

$ npm install --save react-ladda

Usage

LaddaButton is a React component that renders a Ladda button. You can change the button's loading state and progress using the loading and progress props.

import React, { Component } from 'react';

import LaddaButton, { XL, SLIDE_UP } from 'react-ladda';

class App extends Component {

  state = { loading: false };

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

  render() {
    return (
      <LaddaButton
        loading={this.state.loading}
        onClick={this.toggle}
        data-color="#eee"
        data-size={XL}
        data-style={SLIDE_UP}
        data-spinner-size={30}
        data-spinner-color="#ddd"
        data-spinner-lines={12}
      >
        Click Here!
      </LaddaButton>
    );
  }
};

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

Although this package doesn't include the styles for the Ladda buttons, there are many different ways to include them. The easiest way is to add the following tag to your document:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Ladda/1.0.0/ladda.min.css">

Props

All of the native Ladda button options are supported through props:

PropTypeDescription
loadingbooleanDisplays the button's loading indicator
progressnumberNumber from 0.0 to 1.0
data-colorstringColor applied to the button ({green,red,blue,purple,mint})
data-sizestringA button size
data-stylestringA button style
data-spinner-sizenumberNumber representing the size of the spinner in pixels
data-spinner-colorstringColor applied to the spinner (eg. #eee)
data-spinner-linesnumberNumber of spokes in the spinner

Sizes and Styles

Ladda comes with a variety of different sizes and styles that you can use. Button sizes and styles can be directly imported from react-ladda:

import LaddaButton, { XS, EXPAND_LEFT } from 'react-ladda'

Sizes

  • XS
  • S
  • L
  • XL

Styles

  • CONTRACT
  • CONTRACT_OVERLAY
  • EXPAND_LEFT
  • EXPAND_RIGHT
  • EXPAND_UP
  • EXPAND_DOWN
  • SLIDE_LEFT
  • SLIDE_RIGHT
  • SLIDE_UP
  • SLIDE_DOWN
  • ZOOM_IN
  • ZOOM_OUT

Development

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

CommandDescription
npm testRuns the test suite
npm run watchRuns the test suite and reruns when any source or test file changes
npm run lintLints both the source and test files
npm run buildCompiles the source into ES5 and outputs the results into dist

Contributions are more than welcome!

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial