A collection of loading buttons easily customizable.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

logo

Build Status NPM version node version npm download

A collection of loading buttons easily customizable.

💁 Demo

Install 📝

$ npm install react-button-loaders --save

Usage 👓

import React, { Component } from 'react'
import { Lion as Button } from 'react-button-loaders'

class App extends Component {
  state = {
    sendState: ''
  }
  
  handleClick = () => {
    this.setState({sendState: 'loading'})
    //simulating an API
    setTimeout(() => {
      this.setState({sendState: 'finished'})
    }, 3000)
  }
  
  render(){
    return (
      <section>
        <Button onClick={this.handleClick} state={this.state.sendState}>Send</Button>
      </section>
    )
  }
}

export default App

Common API 💡

The following APIs are shared by all Buttons.

Name Type Default Description
className string '' Additional CSS class for the button
state string loading, finished The button state to render
speedProgress number 3000 The loading speed
speedIconLoader number 800 The speed of icon loading
refreshComponent Component Component Change the component that is displayed while loading
checkComponent Component Component Change the icon component that is displayed while loading
onClick Function NOOP onClick will be triggered when button is Clicked
bgColor string #F06189 #F06189 Change background button color
bgLoading string #F06189 #F06189 Change background button color when is loading
bgWhenFinish string #4AD481 #4AD481 Change background button color when is loaded
bgLoadingBehind string #D7E3EF #D7E3EF Change background color if loader has 2 backgrounds

Available buttons 🎣

Help us create more awesome buttons 💝

npm install
npm start

License

react-button-loaders is released under the MIT license.