react-redux-loadmask v1.3.2
react-redux-loadmask
About
If you're looking for a simple to use "loading mask" to be used with your React + Redux application, look no further! This module provides you with:
- a reducer, a couple of actions, and the
<Loadmask />
component itself - the ability to trigger said actions anywhere in your app to show or hide the loadmask
- support for rendering a single child, with a simple prop to change the background color
Peer dependencies are currently as follows:
immutable
react
react-redux
immutable
optional - depends on your app state
Installation
NPM
$ npm install react-redux-loadmask --save
Yarn
$ yarn add react-redux-loadmask
Usage
Using the <Loadmask />
component provided by this module is simple.
There are a few 'parts' provided out of the box for you:
ES6 Import | Immutable.js Import * | |
---|---|---|
<Loadmask /> | react-redux-loadmask | react-redux-loadmask/immutable |
loadmaskReducer | react-redux-loadmask | react-redux-loadmask/immutable |
showLoadmask | react-redux-loadmask | N/A |
hideLoadmask | react-redux-loadmask | N/A |
*
The Loadmask component and its corresponding reducer are available in the Immutable.js flavors, as indicated above.
Example
Import the component and render it within a higher order container. This could be your app's "Main.js" or "App.js".
import React, { Component } from 'react' import Loadmask from 'react-redux-loadmask' export default class ExampleApp extends Component { // ... Let's skip to the fun part render () { return ( <div> <Loadmask /> // ... Your other components </div> ) } }
Import and combine
loadmaskReducer
into your app's "root reducer" (top level). Keep in mind that only the<Loadmask />
component and this function have and require its Immutable variants if your state is utilizing it. (see table above)import { loadmaskReducer } from 'react-redux-loadmask' export default combineReducers({ loadmaskReducer, // ... Your other reducers })
Use the actions
showLoadmask
andhideLoadmask
provided. They utilize namespaced "types", inspired by thereact-redux-router
library. Examples of how you can use them are shown below.import { showLoadmask, hideLoadmask } from 'react-redux-loadmask' // You can then dispatch to either show or hide the loadmask from anywhere! dispatch(showLoadmask())
import { loadmaskActions } from 'react-redux-loadmask' // The same methods are available for you off the `loadmaskActions` import dispatch(loadmaskActions.hideLoadmask())
And that's it! By utilizing the provided reducer and simply rendering the
<Loadmask />
component, you're now able to conveniently manage this top-level UI to enhance browsing experience during large data fetches, page transitions, or even preventing access to a view.
Rendering Children
In the likely event that you'll want to render your own child in the middle of the Loadmask, you can do so by simply wrapping the intended child with the Loadmask tags.
<Loadmask>
<ExampleChild />
</Loadmask>