React wrapper for Ladda buttons
npm install react-laddareact-ladda
===========




A React wrapper for Ladda buttons. Example
react-ladda can be installed directly through npm:
``sh`
$ npm install --save react-ladda
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.
`jsx
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 (
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!
);
}
};
ReactDOM.render(
`
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:
`html`
All of the native Ladda button options are supported through props:
Prop | Type | Description
-------------------- | --------- | -----------
loading | boolean | Displays the button's loading indicatorprogress | number | Number from 0.0 to 1.0data-color | string | Color applied to the button (eg. #222)data-size | string | A button sizedata-style | string | A button styledata-spinner-size | number | Number representing the size of the spinner in pixelsdata-spinner-color | string | Color applied to the spinner (eg. #eee)data-spinner-lines | number | Number of spokes in the spinner
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:
`js`
import LaddaButton, { XS, EXPAND_LEFT } from 'react-ladda'
- XSS
- L
- XL
-
- CONTRACTCONTRACT_OVERLAY
- EXPAND_LEFT
- EXPAND_RIGHT
- EXPAND_UP
- EXPAND_DOWN
- SLIDE_LEFT
- SLIDE_RIGHT
- SLIDE_UP
- SLIDE_DOWN
- ZOOM_IN
- ZOOM_OUT
-
After cloning and running npm install, you can use the following npm commands for easier development:
Command | Description
--------------- | -----------
npm test | Runs the test suitenpm run watch | Runs the test suite and reruns when any source or test file changesnpm run lint | Lints both the source and test filesnpm run build | Compiles the source into ES5 and outputs the results into dist`
_Contributions are more than welcome!_