4.2.1

Enhancements

• Allow async storage for cache provider: #7

4.2.0

Features

• Added ability to integrate with a cache provider via a cacheProvider prop to <LoadsProvider> or <Loads>: #5

Credits

Huge thanks to @daveols for helping!

4.1.1

Enhancements

• Add enableBackgroundStates prop to enable background states for cached responses: #6

4.1.0

Features

• Added ability to cache response/error data using <LoadsProvider> and cacheKey prop to <Loads>

4.0.0

React Loads under the previous architecture, using channels and state components were becoming quite a pain to deal with for nested Loads components. This release aims to simplify the usage and API and hopefully make developing with Loads a better experience.

Breaking changes

• Removed <IfSuccess>, <IfError>, <IfIdle>, <IfLoading>, <IfTimeout> state components.
• Removed channel prop from <Loads>

Features

• In favour of state components, <Loads> now returns isIdle, isTimeout, isLoading, isSuccess and isError as render props.

Migrating from v3 to v4

• Replace state components with variables returned from render props, like so:

Before:

import Loads, { IfIdle, IfLoading, IfSuccess, IfError } from 'react-loads';

<Loads fn={getRandomDog}>
  {({ load, response, state, error }) => (
    <div>
      <p>Current state: {state}</p>
      <IfIdle>
        <button onClick={load}>Load random dog</button>
      </IfIdle>
      <IfLoading>loading...</IfLoading>
      <IfSuccess>
        {response && <img src={response.data.message} alt="Dog" />}
        <div>
          <button onClick={load}>Load another dog</button>
        </div>
      </IfSuccess>
      <IfError>Error! {error}</IfError>
    </div>
  )}
</Loads>

After:

import Loads from 'react-loads';

<Loads fn={getRandomDog}>
  {({ isIdle, isLoading, isSuccess, isError, load, response, state, error }) => (
    <div>
      <p>Current state: {state}</p>
      {isIdle && <button onClick={load}>Load random dog</button>}
      {isLoading && <div>loading...</div>}
      {isSuccess && (
        <div>
          {response && <img src={response.data.message} alt="Dog" />}
          <div>
            <button onClick={load}>Load another dog</button>
          </div>
        </div>
      )}
      {isError && <div>Error! {error}</div>}
    </div>
  )}
</Loads>

3.1.0

Minor Changes

• Add resetState to children render props to provide a way to transition back to idle state: 9a96716

Patches

• Assert component is mounted before this.setState is invoked: 426a456

3.0.1

Patches

• Fix multiple invoking of fn when delay > 0: e2c3e61

3.0.0

Breaking changes

• Remove <Action> as an export of react-automata, and create custom components for the finite set of states in React Loads (idle, loading, timeout, success and error - listed below in Features)
• Renamed <Loads> prop name to channel as the custom state components will also make use of a channel prop for nested <Loads>.
• Removed <Action> as a render prop.

Features

• In favour of <Action>:
  • Added <IfIdle>
  • Added <IfLoading>
  • Added <IfTimeout>
  • Added <IfSuccess>
  • Added <IfError>
  • Added <IfState is={[ ... ]}> to support multiple states

2.1.0

Minor Changes

• Add ability to nest <Loads>: f584427

2.0.0

Breaking Changes

• Renamed loadImmediately prop to loadOnMount.
• Renamed loadingFunc prop to fn.
• Removed hasLoaded, isLoading, and hasTimedOut props from onLoadingRenderer and children.

Features

• Added state to children props.
• Now internally uses React Automata to transition between loading states.
• Exports <Action> (an export of <Action> from React Automata to determine what component to show based on state.