react-async-button

React button component for handling async actions. Inspired from ember-async-button

Installation

$ npm install react-async-button --save

DOCS & DEMO

https://selvagsz.github.io/react-async-button/

Example

 
import React from 'react';
import { render } from 'react-dom';
import AsyncButton from 'react-async-button';
 
export default App extends Component {
  clickHandler() {
    return new Promise((resolve, reject) => {
      // some async stuff
      setTimeout(resolve, 500);
    })
  }
 
  render() {
    return (
      <AsyncButton
        className="btn"
        text="Save"
        pendingText="Saving..."
        fulFilledText="Saved Successfully!"
        rejectedText="Failed! Try Again"
        loadingClass="isSaving"
        fulFilledClass="btn-primary"
        rejectedClass="btn-danger"
        onClick={this.clickHandler}
       />
    )
  }
}
 
render(<App/>, document.getElementById('root'));
 

Note clickHandler should return a promise for the pending state