ReduxBlockUi

This is an advanced feature which is opinionated to work specifically with react-redux. It involves a little more setup as it depends on middleware being used in the redux store. The middleware is provided and only needs to be registered (see below).

Notice the import is coming from a separate file directly; import ReduxBlockUi from 'react-block-ui/redux'. This is done to keep the standard library light for the developers who only want BlockUi and do not use redux and/or do not want ReduxBlockUi.

import React from 'react';
import PropTypes from 'prop-types';
import { Button } from 'reactstrap';
import { connect } from 'react-redux';
import ReduxBlockUi from 'react-block-ui/redux';
import 'react-block-ui/style.css';

class Example extends React.Component {
  constructor(props) {
    super(props);

    this.onBlockingChangeHandler = this.onBlockingChangeHandler.bind(this);
    this.state = {
      blockers: 0,
    };
  }

  // this is just for show, but demonstrates how you can get the number of 'blockers' for a given ReduxBlockUi component
  onBlockingChangeHandler(newValue, oldValue) {
    this.setState({blockers: newValue});
  }

  render() {
    return (
      <div>
        <ReduxBlockUi tag="div" block="REQUEST_START" unblock={["REQUEST_SUCCESS", /fail/i]} onChange={this.onBlockingChangeHandler}>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </ReduxBlockUi>

        {/* the rest is for the demo, to allow you to trigger redux actions and see the actions, this would usually be done by some API calls or something */}
        <Button color="primary" onClick={this.props.requestStart}>Request Start</Button>
        <Button color="success" onClick={this.props.requestSuccess}>Request Success</Button>
        <Button color="danger" onClick={this.props.requestFailure}>Request Failure</Button>
        <Button outline onClick={this.props.otherAction}>Other Action</Button>
        <p>Number of pending requests: {this.state.blockers}</p>
        <div style={{maxHeight: '125px', overflow: 'auto'}}>
          {this.props.actions.map((action, i) =>
            <div key={`action_${i}`}>{this.props.actions.length - i} {JSON.stringify(action)}</div>
          )}
        </div>
      </div>
    );
  }
}

Example.propTypes = {
  requestStart: PropTypes.func,
  requestSuccess: PropTypes.func,
  requestFailure: PropTypes.func,
  otherAction: PropTypes.func,
  actions: PropTypes.array,
};

const forExampleOnly = type => () => ({ type });

export default connect(state => state, {
  requestStart: forExampleOnly('REQUEST_START'),
  requestSuccess: forExampleOnly('REQUEST_SUCCESS'),
  requestFailure: forExampleOnly('REQUEST_FAILURE'),
  otherAction: forExampleOnly('SOMETHING_ELSE'),
})(Example);

Properties

block and unblock are the main props here, blocking is just a passthrough to allow you to force the blocking UI to show. Both block and unblock props accept a string which will be compared to the redux action's type, a RegExp which will be tested against the redux action's type. You can all pass a function which will be executed passing the entire action. The function must return true for the block or unbock to happend (depending on which prop the function is passed to). Finally, you can pass an array containing any combination of those things.

ReduxBlockUi.propTypes = {
  blocking: PropTypes.bool,
  block: PropTypes.oneOfType([
    PropTypes.instanceOf(RegExp),
    PropTypes.string,
    PropTypes.array,
    PropTypes.func,
  ]),
  unblock: PropTypes.oneOfType([
    PropTypes.instanceOf(RegExp),
    PropTypes.string,
    PropTypes.array,
    PropTypes.func,
  ]),
  onChange: PropTypes.func,
};

BlockUiMiddleware

This is the middleware piece which is key to allowing ReduxBlockUi to work the way it does. Here is an example of how you might apply the middleware and where to import it from.

import { applyMiddleware, createStore, combineReducers } from 'redux';
import reduxMiddleware from 'react-block-ui/reduxMiddleware';
//import reducers from './reducers';
const reducers = {actions: (state = [], payload) => [payload, ...state]};

const reducer = combineReducers(reducers);
const createStoreWithMiddleware = applyMiddleware(reduxMiddleware)(createStore);

export default function configureStore(initialState) {
  return createStoreWithMiddleware(reducer, initialState);
}