v2.0.0-beta.1

react-promise-tracker version 2 adds tracker Hooks API implementation.

How to use it?

    
import React from "react";
+ import { usePromiseTracker } from "react-promise-tracker";
import Loader from "react-loader-spinner";
import "./spinner.css";

export const Spinner = (props) => {
+  const { promiseInProgress } = usePromiseTracker();

  return (
+   promiseInProgress && (
      <div className="spinner">
        <Loader type="ThreeDots" color="#2BAD60" height="100" width="100" />
      </div>
    )
  );
};

• We add examples folder in ./examples.

Breaking changes

• Replace area property by config to provide a config object. Example:

import React, { Component } from 'react';
import { render } from 'react-dom';
import { App } from './app';
import { Spinner } from './common/components/spinner';

render(
  <div>
    <App />
-   <Spinner area="test-area" />
+   <Spinner config={ { area: "test-area" } } />
  </div>,
  document.getElementById('root'));

Changes

• Added delay property to resolve promise after feeded delay. A use case, for example, when we have a high speed connection, we don't want to show the spinner if promise was resolved too fast.

• Hook example:

import React from "react";
import { usePromiseTracker } from "react-promise-tracker";
import Loader from "react-loader-spinner";
import "./spinner.css";

export const Spinner = (props) => {
- const { promiseInProgress } = usePromiseTracker();
+ const { promiseInProgress } = usePromiseTracker({delay: 200});

  return (
    promiseInProgress && (
      <div className="spinner">
        <Loader type="ThreeDots" color="#2BAD60" height="100" width="100" />
      </div>
    )
  );
};

• HOC example:

import React, { Component } from 'react';
import { render } from 'react-dom';
import { App } from './app';
import { Spinner } from './common/components/spinner';

render(
  <div>
    <App />
-   <Spinner />
+   <Spinner config={ { delay: 200 } } />
  </div>,
  document.getElementById('root'));