A Promising Button Component (Demo)
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.
npm i antd-promise-button
See the demo for live examples
;// In the simplest case, you just need to return a promise// from your onClick handlerconst onClick =return <Button onClick=onClick>Click Me!</Button>// For better UX, customise the labels based on the statusreturn<Buttontype="primary"onClick=loginlabels=ButtonFULFILLED: 'Logged In'ButtonINITIALISED: 'Log In'ButtonPENDING: 'Logging In'ButtonREJECTED: 'Log In Failed'/>// You can even customise the green/red colorsreturn<ButtononClick=signUplabels=ButtonFULFILLED: 'Signed Up'ButtonINITIALISED: 'Sign Up'ButtonPENDING: 'Signing Up'ButtonREJECTED: 'Sign Up Failed'colors=ButtonFULFILLED: '#00FF00'ButtonREJECTED: '#FF69B4'/>
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
Currently only native promises are tested for, but any thenable should work.
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