@wojtekmaj/react-async-button

    0.1.2 • Public • Published

    npm downloads CI dependencies dev dependencies tested with jest

    React-Async-Button

    A button that handles Promises for your React app.

    tl;dr

    • Install by executing npm install @wojtekmaj/react-async-button or yarn add @wojtekmaj/react-async-button.
    • Use by adding import AsyncButton from '@wojtekmaj/react-async-button' and passing pendingConfig, successConfig.

    Getting started

    Compatibility

    Your project needs to use React 16.8 or later.

    React-Async-Button is also compatible with React Native.

    Installation

    Add React-Async-Button to your project by executing npm install @wojtekmaj/react-async-button or yarn add @wojtekmaj/react-async-button.

    Usage

    Here's an example of basic usage:

    import React from 'react';
    import AsyncButton from '@wojtekmaj/react-async-button';
    
    const pendingConfig = {
      children: 'Loading…',
      disabled: true,
    };
    
    const successConfig = {
      children: 'Done',
    };
    
    const errorConfig = {
      children: 'Try again',
    };
    
    function MyComponent() {
      async function onClick(event) {
        // Do some async stuff
      }
    
      return (
        <AsyncButton
          onClick={onClick}
          pendingConfig={pendingConfig}
          successConfig={successConfig}
          errorConfig={errorConfig}
        >
          Do async stuff
        </AsyncButton>
      );
    }

    User guide

    AsyncButton

    Renders a button.

    Props

    Prop name Description Default value Example values
    as Component to render button with. "button"
    • String: "custom-button"
    • React component: MyButton
    errorConfig Props to override default props with when onClick async function throws. {} { children: 'Try again' }
    onClick A function, a function returning a Promise, or an async function. n/a
    pendingConfig Props to override default props when button has been clicked but onClick function did not yet resolve. {} { children: 'Loading…' }
    resetTimeout Time in milliseconds after which AsyncButton should stop using errorConfig / successConfig overrides. 2000 5000
    successConfig Props to override default props with when onClick async function resolves. {} { children: 'Done' }

    …and everything else a normal <button> would accept!

    Accessibility

    For accessibility purposes, we recommend setting aria-live="polite" and aria-atomic="true" props so that button label changes are announced to the user using assitive technologies.

    License

    The MIT License.

    Author

    Wojciech Maj
    kontakt@wojtekmaj.pl
    https://wojtekmaj.pl

    Install

    npm i @wojtekmaj/react-async-button

    DownloadsWeekly Downloads

    6

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    21.5 kB

    Total Files

    7

    Last publish

    Collaborators

    • wojtekmaj