react-ladda

WebJar for react-ladda

License	MIT
Categories	React User Interface Web Frameworks
GroupId	org.webjars.npm
ArtifactId	react-ladda
Last Version	4.0.0
Release Date	Dec 8, 2015
Type	jar
Description	react-ladda WebJar for react-ladda
Project URL	http://webjars.org
Source Code Management	https://github.com/jsdir/react-ladda

Download react-ladda

Filename	Size
react-ladda-4.0.0.pom
react-ladda-4.0.0.jar	8 KB
react-ladda-4.0.0-sources.jar	22 bytes
react-ladda-4.0.0-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/react-ladda/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>react-ladda</artifactId>
    <version>4.0.0</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/react-ladda/
implementation 'org.webjars.npm:react-ladda:4.0.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/react-ladda/
implementation ("org.webjars.npm:react-ladda:4.0.0")

Apache Buildr

'org.webjars.npm:react-ladda:jar:4.0.0'

Apache Ivy

<dependency org="org.webjars.npm" name="react-ladda" rev="4.0.0">
  <artifact name="react-ladda" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='react-ladda', version='4.0.0')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "react-ladda" % "4.0.0"

Leiningen

[org.webjars.npm/react-ladda "4.0.0"]

Dependencies

compile (2)

Group / Artifact	Type	Version
org.webjars.npm : ladda	jar	[0.9.8,0.10)
org.webjars.npm : react-addons-pure-render-mixin	jar	[0.14.0,0.15)

Project Modules

There are no modules declared in this project.

react-ladda

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:

Prop	Type	Description
loading	boolean	Displays the button's loading indicator
progress	number	Number from 0.0 to 1.0
data-color	string	Color applied to the button ({green,red,blue,purple,mint})
data-size	string	A button size
data-style	string	A button style
data-spinner-size	number	Number representing the size of the spinner in pixels
data-spinner-color	string	Color applied to the spinner (eg. #eee)
data-spinner-lines	number	Number 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:

Command	Description
npm test	Runs the test suite
npm run watch	Runs the test suite and reruns when any source or test file changes
npm run lint	Lints both the source and test files
npm run build	Compiles the source into ES5 and outputs the results into dist

Contributions are more than welcome!

Versions

Version
4.0.0 Dec 8, 2015