Don't wrong again about "isLoading? π : isError ? β : π"
- isLoading? π : isError ? β : π
yarn add @thaddeusjiang/react-promise-data
export const DefaultLoading = () => {
return (
<PromiseDataRender isLoading={true} isError={false} data={'anything'}>
{({ data }) => <div>{data}</div>}
</PromiseDataRender>
);
};
export const DefaultError = () => {
return (
<PromiseDataRender isLoading={false} isError={true} data={'anything'}>
{({ data }) => <div>{data}</div>}
</PromiseDataRender>
);
};
export const DefaultData = () => {
return (
<PromiseDataRender isLoading={false} isError={false} data={'anything'}>
{({ data }) => <div>{data}</div>}
</PromiseDataRender>
);
};
export const CustomLoading = () => {
return (
<PromiseDataRender
isLoading={true}
isError={false}
data={'anything'}
loadingComponent={() => <div>π Custom Loading...</div>}
>
{({ data }) => <div>{data}</div>}
</PromiseDataRender>
);
};
export const CustomError = () => {
return (
<PromiseDataRender
isLoading={false}
isError={true}
data={'anything'}
error={new Error('π₯ Custom Error!')}
errorComponent={(error) => <div>π₯ Custom Error: {error}</div>}
>
{({ data }) => <div>{data}</div>}
</PromiseDataRender>
);
};
Run inside another terminal:
yarn storybook
Then run the example inside another:
yarn link
cd example
yarn link "@thaddeusjiang/react-promise-data"
yarn # or yarn to install dependencies
yarn start #
yarn test
π€ Thaddeus Jiang
- Website: https://thaddeusjiang.com/
- Twitter: @ThaddeusJiang
- Github: @ThaddeusJiang
Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.
Give a βοΈ if this project helped you!
Copyright Β© 2022 Thaddeus Jiang.
This project is MIT licensed.
This README was generated with β€οΈ by readme-md-generator