@zumper/react-ladda

A React wrapper for Ladda buttons. Example

NOTE

This project started as a fork of react-ladda.

Differences:

• props without the cumbersome data- prefix are allowed
• upgraded to ladda 2 see here
• modern build system with es, cjs and umd builds
• plays nicely with create-react-app and other modern build systems

Installation

@zumper/react-ladda can be installed directly through npm:

# with NPM
$ npm install --save @zumper/react-ladda

# with yarn
$ yarn add @zumper/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 '@zumper/react-ladda'

class MyButton extends Component {
  state = { loading: false, progress: 0 }

  onClick = () => {
    this.setState((state) => ({
      loading: true,
      progress: 0.5,
    }))
  }

  render() {
    const { loading, progress } = this.state
    return (
      <LaddaButton
        loading={loading}
        progress={progress}
        onClick={this.onClick}
        color="mint"
        size={XL}
        style={SLIDE_UP}
        spinnerSize={30}
        spinnerColor="#ddd"
        spinnerLines={12}
      >
        Click Here!
      </LaddaButton>
    )
  }
}

export default MyButton

Including styles

Although this package doesn't include the styles for the Ladda buttons, there are many different ways to include them. You can read about how to manage CSS in the Ladda docs.

With Webpack

If you are using webpack (or create-react-app) to build your project you can easily import the required styles directly from the ladda package.

// import the ladda theme directly from the ladda package.
import 'ladda/dist/ladda.min.css'

// optionally import the themeless styles to style the buttons yourself.
import 'ladda/dist/ladda-themeless.min.css'

With SCSS

If you are using scss (or create-react-app) on your project you can import the scss styles directly from the ladda package.

// import themeless styles directly from the ladda package
@import '~ladda/css/ladda';

// OR import the themed styles
@import '~ladda/css/ladda-themed';

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
color or data-color	string	Color applied to the button (A color)
size or data-size	string	A button size
style or data-style	string	A button style
spinnerSize or data-spinner-size	number	Number representing the size of the spinner in pixels
spinnerColor or data-spinner-color	string	Color applied to the spinner (eg. #eee)
spinnerLines or data-spinner-lines	number	Number of spokes in the spinner

Colors, 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 @zumper/react-ladda:

import LaddaButton, { GREEN, XS, EXPAND_LEFT } from '@zumper/react-ladda'

Colors

• GREEN
• RED
• BLUE
• PURPLE
• MINT

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