Miss any of our Open RFC calls?Watch the recordings here! »

@zumper/react-ladda

7.2.3 • Public • Published

@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

Install

npm i @zumper/react-ladda

DownloadsWeekly Downloads

534

Version

7.2.3

License

MIT

Unpacked Size

95.2 kB

Total Files

21

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar