Examples

You can try to a sample of react-promise-tracker live:

Examples available:

• Basic example: loading data form a remote api, feeding them in a table and displaying an spinner meanwhile request is being processed.

  • Code Sandbox: https://codesandbox.io/s/github/lemoncode/react-promise-tracker/tree/master/examples/00-example-basic
  • Github: https://github.com/Lemoncode/react-promise-tracker/tree/master/examples/00-example-basic

• Using areas: Showing loading indicators based on ui areas (you can just trackpromises to be displayed on only certain areas of the screen).

  • Code Sandbox: https://codesandbox.io/s/github/lemoncode/react-promise-tracker/tree/master/examples/01-example-areas
  • Github: https://github.com/Lemoncode/react-promise-tracker/tree/master/examples/01-example-areas

• Using delay: Show ajax indicator not immediately but after a delay (useful for fast internet connections).

  • Code Sandbox: https://codesandbox.io/s/github/lemoncode/react-promise-tracker/tree/master/examples/02-example-delay
  • Github: https://github.com/Lemoncode/react-promise-tracker/tree/master/examples/02-example-delay

• HOC sample: How to consume high order component implementation of react promise tracker.

  • Code Sandbox: https://codesandbox.io/s/github/lemoncode/react-promise-tracker/tree/master/examples/03-example-hoc
  • Github: https://github.com/Lemoncode/react-promise-tracker/tree/master/examples/03-example-hoc

• HOC sample areas: HOC + areas

  • Code Sandbox: https://codesandbox.io/s/01-example-areas-hoc-ji3fh

• Initial load: Just firing AJAX request on application initial load.

  • Code Sandbox: https://codesandbox.io/s/github/lemoncode/react-promise-tracker/tree/master/examples/04-initial-load
  • Github: https://github.com/Lemoncode/react-promise-tracker/tree/master/examples/04-initial-load

• Typescript: Using react-promise-tracker on a typescript project (including typings).

  • Code Sandbox: https://codesandbox.io/s/github/lemoncode/react-promise-tracker/tree/master/examples/05-typescript
  • Github: https://github.com/Lemoncode/react-promise-tracker/tree/master/examples/05-typescript

• Suspense like: Sample implementing a suspense-like component (typescript).

  • Code Sandbox: https://codesandbox.io/s/github/lemoncode/react-promise-tracker/tree/master/examples/06-suspense-like
  • Github: https://github.com/Lemoncode/react-promise-tracker/tree/master/examples/06-suspense-like

• Suspense custom: sample implementing a suspense-like component that can be customized by passing a spinner component of your choice (typescript).

  • Code Sandbox: https://codesandbox.io/s/github/lemoncode/react-promise-tracker/tree/master/examples/07-suspense-custom
  • Github: https://github.com/Lemoncode/react-promise-tracker/tree/master/examples/07-suspense-custom