🥑 antd-promise-button

A Promising Button Component (Demo)

Why?

Promise buttons can be used to make many interfaces feel more responsive and intuitive.

When the user clicks a promise button, a loading spinner is shown and the button is disabled. This feedback assures the user that their action is being processed, and prevents accidental double-clicks and other bugs.

If the action is successful, the button turns green and shows a success message. This makes the page feel more responsive while the user waits for data to load, the page to redirect or other slow processes to complete.

If the action is unsuccessful, the button will turn red and show an error message.

Installation

npm i antd-promise-button

Usage

See the demo for live examples

import { Button } from 'antd-promise-button';
import 'antd/lib/button/style/css' // Don't forget styles!
 
// In the simplest case, you just need to return a promise
//   from your onClick handler
const onClick = () => new Promise(res => setTimeout(res, 1000))
return <Button onClick={onClick}>Click Me!</Button>
 
// For better UX, customise the labels based on the status
return (
  <Button
    type="primary"
    onClick={login}
    labels={{
      [Button.FULFILLED]: 'Logged In',
      [Button.INITIALISED]: 'Log In',
      [Button.PENDING]: 'Logging In',
      [Button.REJECTED]: 'Log In Failed',
    }}
  />
)
 
// You can even customise the green/red colors
return (
  <Button
    onClick={signUp}
    labels={{
      [Button.FULFILLED]: 'Signed Up',
      [Button.INITIALISED]: 'Sign Up',
      [Button.PENDING]: 'Signing Up',
      [Button.REJECTED]: 'Sign Up Failed',
    }}
    colors={{
      [Button.FULFILLED]: '#00FF00',
      [Button.REJECTED]: '#FF69B4',
    }}
  />
)

onClick

The button is backwards compatible, if your onClick handler doesn't return a promise, it behaves just like a normal button.

Remember that you cannot return false to prevent default behavior in React. So while any non-promise will work, you should only ever need to return a Promise or undefined.

Currently only native promises are tested for, but any thenable should work.

Contribution & Feedback

Question? Bug? Feature request? Not sure? Open an issue!

If this is almost what you were looking for, let me know and I can probably help!

Pull requests welcome, but please get in touch first. I don't want to waste your time 😁

See the code on GitHub