BlockUi

This is the basic ability. Wrap a section with the BlockUi component and set theblocking prop to true to block the UI/children (and show the loader) orfalse to allow user interaction with the UI/children.

import React from 'react';
import { Button } from 'reactstrap';
import BlockUi from 'react-block-ui';
import 'react-block-ui/style.css';

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

    this.toggleBlocking = this.toggleBlocking.bind(this);
    this.state = {
      blocking: false,
    };
  }

  toggleBlocking() {
    this.setState({blocking: !this.state.blocking});
  }

  render() {
    return (
      <div>
        <BlockUi tag="div" blocking={this.state.blocking}>
          <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>
        </BlockUi>
        <Button onClick={this.toggleBlocking} color="primary">Toggle Block</Button>
      </div>
    );
  }
}

Properties

blocking is the main props here, allowing you to show the blocking UI. When it is truethe blocking UI will be shown, when it is false the blocking UI will not be shown. For the rest of the props, see their examples/demos below.

BlockUi.propTypes = {
  blocking: PropTypes.bool,
  keepInView: PropTypes.bool,
  children: PropTypes.node,
  renderChildren: PropTypes.bool, // default to true
  className: PropTypes.string,
  message: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.node,
  ]),
  loader: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.func,
    PropTypes.node,
  ]),
  tag: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.func,
  ]),
};

Custom Loading Message

You can provide a message which will appear above the loading indicate by using the message prop.

import React from 'react';
import { Button } from 'reactstrap';
import BlockUi from 'react-block-ui';
import 'react-block-ui/style.css';

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

    this.toggleBlocking = this.toggleBlocking.bind(this);
    this.state = {
      blocking: false,
    };
  }

  toggleBlocking() {
    this.setState({blocking: !this.state.blocking});
  }

  render() {
    return (
      <div>
        <BlockUi tag="div" blocking={this.state.blocking} message="Loading, please wait">
          <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>
        </BlockUi>
        <Button onClick={this.toggleBlocking} color="primary">Toggle Block</Button>
      </div>
    );
  }
}

Using external/custom loader

You do not have to use the default loader that comes with this library, you can pass anything you want. Pass JSX to render or a component to the loader prop to use it. In the exmaple below, we are using the fancy Loaders.css via the convenient react-loaders library. Use the select input to change the loader you see.

import React from 'react';
import { Button, Col, Input, Row } from 'reactstrap';
import BlockUi from 'react-block-ui';
import { Loader, Types } from 'react-loaders';
import 'react-block-ui/style.css';
import 'loaders.css/loaders.min.css';

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

    this.toggleBlocking = this.toggleBlocking.bind(this);
    this.setLoaderType = this.setLoaderType.bind(this);
    this.state = {
      blocking: false,
      loaderType: 'ball-triangle-path',
    };
  }

  toggleBlocking() {
    this.setState({blocking: !this.state.blocking});
  }

  setLoaderType(e) {
    this.setState({loaderType: e.target.value});
  }

  render() {
    return (
      <div>
        <BlockUi tag="div" blocking={this.state.blocking} loader={<Loader active type={this.state.loaderType} color="#02a17c"/>}>
          <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>
        </BlockUi>
        <Row>
          <Col xs={12} sm={6}>
            <Input type="select" onChange={this.setLoaderType} value={this.state.loaderType}>
              {Object.keys(Types).map(type =>
                <option key={type} value={type}>{type}</option>
              )}
            </Input>
          </Col>
          <Col xs={12} sm={3}>
            <Button onClick={this.toggleBlocking} color="primary">Toggle Block</Button>
          </Col>
        </Row>
      </div>
    );
  }
}

Focus / Keyboard Navigation

Unlike other block ui libraries, you cannot tab into a blocked area. Just try to trigger a button while blocking. Focus management also is applied. If the active focus was on an element within the blocked area, it will be added back to the element when blocking stops. If the user changes focus during blocking, it will not interrupt their flow.

import React from 'react';
import { Button } from 'reactstrap';
import BlockUi from 'react-block-ui';
import 'react-block-ui/style.css';

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

    this.toggleBlocking = this.toggleBlocking.bind(this);
    this.youClickedIt = this.youClickedIt.bind(this);
    this.state = {
      blocking: false,
    };
  }

  toggleBlocking() {
    if (!this.state.blocking) {
      this.unblockIn(3);
    }
    this.setState({blocking: !this.state.blocking});
  }

  unblockIn(seconds) {
    this.setState({countdown: seconds});
    if(!seconds) {
      this.setState({blocking: false});
    } else {
      setTimeout(() => this.unblockIn(--seconds), 1000)
    }
  }

  youClickedIt() {
    if (this.state.blocking) {
      window.alert('Please report an issue that blocking did not prevent you from clicking the button');
    } else {
      this.toggleBlocking();
    }
  };

  render() {
    return (
      <div>
        <BlockUi tag="div" blocking={this.state.blocking} className="my-2">
          <Button color="danger" onClick={this.youClickedIt}>
            {this.state.blocking
              ? `Auto-unblocking in ${this.state.countdown} seconds`
              : 'Just try to trigger me when blocking'}
          </Button><br />
          <Button color="danger" onClick={this.youClickedIt}>
            {this.state.blocking
              ? `Auto-unblocking in ${this.state.countdown} seconds`
              : 'Just try to trigger me when blocking'}
          </Button><br />
          <Button color="danger" onClick={this.youClickedIt}>
            {this.state.blocking
              ? `Auto-unblocking in ${this.state.countdown} seconds`
              : 'Just try to trigger me when blocking'}
          </Button>
        </BlockUi>
        <Button onClick={this.toggleBlocking} color="primary">Toggle Block</Button>
      </div>
    );
  }
}

Do not render children while blocking

Setting the renderChildren prop to false will prevent the children from rendering while blocking. This is useful when the children depend on information which is still loading and would provide a poor user experience if rendered without the data which is still being requested/loading.

import React from 'react';
import { Button } from 'reactstrap';
import BlockUi from 'react-block-ui';
import 'react-block-ui/style.css';

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

    this.toggleBlocking = this.toggleBlocking.bind(this);
    this.state = {
      blocking: false,
    };
  }

  toggleBlocking() {
    this.setState({blocking: !this.state.blocking});
  }

  render() {
    return (
      <div>
        <BlockUi tag="div" blocking={this.state.blocking} renderChildren={false}>
          <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>
        </BlockUi>
        <Button onClick={this.toggleBlocking} color="primary">Toggle Block</Button>
      </div>
    );
  }
}

Keep the loader (and message) in view

If you have a large/long section which you are blocking, you may notice that the loader/message isn't always in the viewport and thus is not visible to the user. To help with this, you can pass the keepInViewprop. When keepInView is true, the loader will center itself within the part of the blocked container which is in the viewport. Note: This only affect vertical scrolling. Click the "Toggle Block" button in the example below and scroll down.

import React from 'react';
import { Button } from 'reactstrap';
import BlockUi from 'react-block-ui';
import 'react-block-ui/style.css';

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

    this.toggleBlocking = this.toggleBlocking.bind(this);
    this.state = {
      blocking: false,
    };
  }

  toggleBlocking() {
    this.setState({blocking: !this.state.blocking});
  }

  render() {
    return (
      <div>
        <Button onClick={this.toggleBlocking} color="primary">Toggle Block</Button>
        <BlockUi tag="div" blocking={this.state.blocking} message="Please wait" keepInView>
          <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>
          <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>
          <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>
          <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>
          <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>
          <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>
        </BlockUi>
        <Button onClick={this.toggleBlocking} color="primary">Toggle Block</Button>
      </div>
    );
  }
}