Numbers Prefer Multiplication
    Have ideas to improve npm?Join in the discussion! »

    @zumper/react-ladda

    7.2.4 • 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

    1,536

    Version

    7.2.4

    License

    MIT

    Unpacked Size

    97.4 kB

    Total Files

    21

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar