react-redux-loader (example)

React-Redux loaders for controlling loader display with redux state

Install

npm install --save react-redux-loader

Usage

Check out the example in the example folder.

Step 1. Call makeLoaderRoot with your store, your customized loaders and the mounting callback function (if you need to control where in the DOM your root mounts) passed into it, the resulting component is your loader root component.

// ./index.js
import store from './store';
import { makeLoaderRoot } from 'react-redux-loader';
import * as modalComponents from './modal_components';

const mountLoaderRoot = loaderContainer => {
  document.body.prepend(loaderContainer);
};
const LoaderRoot = makeLoaderRoot(store, loaders, mountLoaderRoot);

const Root = () => (
  <Fragment>
    <Provider store={store}>
      <App />
    </Provider>
     <LoaderRoot />
  </Fragment>
);

// ./components/loaders
import OtherLoader from './other_loader';
import Spinner from './spinning_loader';

export const OTHER_LOADER = OtherLoader;
export const SPINNING_LOADER = Spinner;

Step 2. Add the loader reducer to your project under the key loader.

import { combineReducers } from 'redux';

import { loaderReducer } from 'react-redux-loader';

const rootReducer = combineReducers({
  loader: loaderReducer,
});

export default rootReducer;

Step 3. Wire up the provided action creators into your app where appropriate. These can be used in your components or anywhere in your app to dispatch events.

import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import { actions as loaderActions } from 'react-redux-loader';

class App extends Component {
  
  render() {
    return (
      <Fragment>
        <div>
          <button onClick={() => this.props.showSyncLoader()}>
            DEFAULT LOADER
          </button>
        </div>
        <div>
          <button onClick={() => this.props.hideSyncLoader()} >
            Hide Loader
          </button>
        </div>
      </Fragment>
    );
  }
}
export default connect(
  null,
  { ...actions, ...loaderActions },
)(App);

Components

Component Factory: makeLoaderRoot(store, loaders, mountLoaderRoot)

arguments:

| Property | Type | Required | Default | Description | |:--------------|:--------------|:--------------|:--------------|:--------------| | store | object | Required | undefined | Pass in the redux store. | | loaders | object | Optional | undefined | Optionally pass a your own loader components. | | mountLoaderRoot | function | Optional | undefined | callback to change where the in the DOM the loader root mounts. |

Action Creators

Available action creators.

showSyncLoader(args = {}):

available arguments:

| Key | Type | Required | Default | Description | |:--------------|:--------------|:--------------|:--------------|:--------------| | type | string | Optional | null | The type of loader that should display registered with makeLoaderRoot. | | shouldTimeOut | bool | Optional | null | Should this loader wait to display. | | timeOut | int | Optional | null | How long the loader should wait before displaying in MS. |

hideSyncLoader():

available arguments:

none

showInlineLoader(key = null):

available arguments:

| Key | Type | Required | Default | Description | |:--------------|:--------------|:--------------|:--------------|:--------------| | key | string | Required | null | The key of the inline loader to display. |

hideInlineLoader(key = null):

available arguments:

| Key | Type | Required | Default | Description | |:--------------|:--------------|:--------------|:--------------|:--------------| | key | string | Required | null | The key of the inline loader to hide. |

interfaceRequest(args = {}):

available arguments:

| Key | Type | Required | Default | Description | |:--------------|:--------------|:--------------|:--------------|:--------------| | type | string | Optional | null | The type of loader that should display registered with makeLoaderRoot. | | shouldTimeOut | bool | Optional | null | Should this loader wait to display. | | timeOut | int | Optional | null | How long the loader should wait before displaying in MS. |

interfaceComplete():

available arguments:

none

License

MIT