@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