Don't wrong again about "isLoading? 🔄 : isError ? ❌ : 👍"

Features

• [x] isLoading? 🔄 : isError ? ❌ : 👍

Install

yarn add @thaddeusjiang/react-promise-data

Usage

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>
  );
};

Development

Storybook

Run inside another terminal:

yarn storybook

Example

Then run the example inside another:

yarn link

cd example
yarn link "@thaddeusjiang/react-promise-data"
yarn # or yarn to install dependencies
yarn start #

Run tests

yarn test

Author

👤 Thaddeus Jiang

• Website: https://thaddeusjiang.com/
• Twitter: @ThaddeusJiang
• Github: @ThaddeusJiang

🤝 Contributing

Contributions, issues and feature requests are welcome!Feel free to check issues page. You can also take a look at the contributing guide.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2022 Thaddeus Jiang. This project is MIT licensed.

This README was generated with ❤️ by readme-md-generator