$ npm install react-button-loaders --save
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
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 |
npm install
npm start
react-button-loaders
is released under the MIT license.