Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/wojtekmaj/react-async-button. A button that handles Promises for your React app.
Something went wrong. Try again.
2.3 kB · 94 lines
TSX
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495import AsyncButton from '@wojtekmaj/react-async-button';
import './Test.css';
import { Button } from './button.styles.js';
const pendingConfig = { children: 'Loading…', disabled: true,};
const successConfig = { children: 'Done',};
const errorConfig = { children: 'Try again',};
function sleep(ms: number) { return new Promise((resolve) => setTimeout(resolve, ms));}
export default function Test() { function onSyncClick() { // Intentionally empty }
async function onAsyncClick() { await sleep(2000); }
function onSyncErrorClick() { throw new Error('Sync error'); }
async function onAsyncErrorClick() { await sleep(2000); throw new Error('Async error'); }
return ( <div className="Test"> <header> <h1>react-async-button test page</h1> </header> <div className="Test__container"> <main className="Test__container__content"> <AsyncButton onClick={onSyncClick} pendingConfig={pendingConfig} successConfig={successConfig} errorConfig={errorConfig} > Do sync stuff </AsyncButton> <AsyncButton onClick={onAsyncClick} pendingConfig={pendingConfig} successConfig={successConfig} errorConfig={errorConfig} > Do async stuff </AsyncButton> <AsyncButton onClick={onSyncErrorClick} pendingConfig={pendingConfig} successConfig={successConfig} errorConfig={errorConfig} > Crash on sync stuff </AsyncButton> <AsyncButton onClick={onAsyncErrorClick} pendingConfig={pendingConfig} successConfig={successConfig} errorConfig={errorConfig} > Crash on async stuff </AsyncButton> <AsyncButton as={Button} onClick={onAsyncClick} pendingConfig={pendingConfig} successConfig={successConfig} errorConfig={errorConfig} > I’m using <code>as</code> prop </AsyncButton> </main> </div> </div> );}