manprajapat / react-button-loaders

A collection of loading buttons easily customizable.

A collection of loading buttons easily customizable.

💁 Demo

• Storybook Playground 🌈

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	Change background button color
bgLoading	string	#F06189	Change background button color when is loading
bgWhenFinish	string	#4AD481	Change background button color when is loaded
bgLoadingBehind	string	#D7E3EF	Change background color if loader has 2 backgrounds

Available buttons 🎣

• Beetle
• Lion
• Rabbit

Help us create more awesome buttons 💝

npm install
npm start

License

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