react-ladda
React wrapper for Ladda buttons.
Installation
react-ladda
can be installed directly through npm:
$ npm install --save react-ladda
Compatibility
react-ladda version |
react version |
---|---|
>=3.1.0 |
0.14.x |
>=2.0.2 <3.1.0 |
0.13.x |
<2.0.2 |
0.12.x |
Usage
LaddaButton
is a React component that wraps Ladda buttons with additional props for the built-in loading indicators:
React = require('react');
ReactDOM = require('react-dom');
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>
);
}
});
ReactDOM.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>