React-Promise-Button

A promise-button for you react app.

Installation

Add react-promise-button to your project by executing npm install @mivia/react-promise-button or yarn add @mivia/react-promise-button.

Demo

Preview available!

Usage

Here's an example of basic usage:

import React, { Component } from 'react';
import PromiseButton from '@mivia/promise-button';

const pendingConfig = {
  className: `PromiseButton--pending`,
  children: (
    <span>
      Pending!
    </span>
  ),
};

const successConfig = {
  className: `PromiseButton--success`,
  children: (
    <span>
      Success done!
    </span>
  ),
};

export default class Example extends Component {
  onClickSuccess = () => new Promise((resolve) => {
    setTimeout(() => {
      resolve('Success!');
    }, 2000);
  })

  render() {
    return (
      <PromiseButton
        onClick={this.onClickSuccess}
        pendingConfig={pendingConfig}
        successConfig={successConfig}
      >
        Gonna be success
      </PromiseButton>
    );
  }
}

User guide

Props

|Prop name|Description|Default value|Example values| |----|----|----|----| |className|Class name(s) that will be added to the button element.|n/a|"class1 class2"| |onClick|A required callback function returning a promise.|n/a|() => Promise.resolve()| |pendingConfig|Config including className and children that decorates the button when promise is pending.|n/a|{className: "PromiseButton--pending", children: (<h2>Pending!</h2>)}| |successConfig|Config including className and children that decorates the button when promise has been successful.|n/a|{className: "PromiseButton--success", children: (<h2>Success!</h2>)}| |errorConfig|Config including className and children that decorates the button when promise has failed.|n/a|{className: "PromiseButton--error", children: (<h2>Error!</h2>)}| |refreshTimeout|Time that has to pass before switching back to initial config of the button after the promise is done, in miliseconds.|2000|3000|