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.2 kB · 93 lines
JSX
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394import React from 'react';import AsyncButton from '@wojtekmaj/react-async-button/src';
import './Test.css';
import { Button } from './button.styles';
const pendingConfig = { children: 'Loading…', disabled: true,};
const successConfig = { children: 'Done',};
const errorConfig = { children: 'Try again',};
function sleep(ms) { return new Promise((resolve) => setTimeout(resolve, ms));}
export default function Test() { function onSyncClick() {}
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> );}