@mivia/react-promise-button

1.0.4 • Public • Published

Build Status dependencies dev dependencies

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

Package Sidebar

Install

npm i @mivia/react-promise-button

Weekly Downloads

0

Version

1.0.4

License

MIT

Unpacked Size

28.5 kB

Total Files

9

Last publish

Collaborators

  • mivia