@mivia/react-promise-button

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