Socket
Socket
Sign inDemoInstall

@zumper/react-ladda

Package Overview
Dependencies
10
Maintainers
5
Versions
10
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@zumper/react-ladda

React wrapper for Ladda buttons


Version published
Maintainers
5
Weekly downloads
442
increased by58.99%

Weekly downloads

Readme

Source

@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:

PropTypeDescription
loadingbooleanDisplays the button's loading indicator
progressnumberNumber from 0.0 to 1.0
color or data-colorstringColor applied to the button (A color)
size or data-sizestringA button size
style or data-stylestringA button style
spinnerSize or data-spinner-sizenumberNumber representing the size of the spinner in pixels
spinnerColor or data-spinner-colorstringColor applied to the spinner (eg. #eee)
spinnerLines or data-spinner-linesnumberNumber 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

Keywords

FAQs

Last updated on 12 Feb 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc