Easy way to block the user from interacting with your UI.

Overview

npm version Build Status Coverage Status

react-block-ui

Easy way to block the user from interacting with your UI.

About

This library contains easy to use components to prevent the user from interacting with the user interface based on some conditions.

There is also a separate component which works with redux to help block and unblock automatically based on redux action types. See the ReduxBlockUi component for more details.

Documentation

See: https://availity.github.io/react-block-ui/

Installation

Install react-block-ui via NPM

npm install --save react-block-ui react react-dom

Import the components you need, example:

import BlockUi from 'react-block-ui';
import ReduxBlockUi from 'react-block-ui/redux'; // only for redux
import reduxMiddleware from 'react-block-ui/reduxMiddleware'; // only for redux
import from 'react-block-ui/style.css';

Development

Install dependencies:

npm install

Run examples at http://localhost:8080/ with webpack dev server:

npm start

Run tests:

npm test

Run tests & coverage report:

npm test:coverage

Watch tests:

npm run test:watch

Disclaimer

Open source software components distributed or made available in the Availity Materials are licensed to Company under the terms of the applicable open source license agreements, which may be found in text files included in the Availity Materials.

License

MIT

Issues
  • ERROR in ./~/react-block-ui/style.css

    ERROR in ./~/react-block-ui/style.css

    I just use react-block-ui in my react project. First I run npm install --save react-block-ui react react-dom

    And write something like

    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    import ContentBody from './components/content_body';
    import NavBar from './components/NavBar.js';
    import Main from './components/Main.js';
    import { BrowserRouter } from "react-router-dom";
    
    import BlockUi from 'react-block-ui';
    import 'react-block-ui/style.css';
    import { Button } from 'react-bootstrap';
    
    
    
    class App extends 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}>
    			 	<NavBar />
    				<Main />
    				</BlockUi>
    		        <Button onClick={this.toggleBlocking} color="primary">Toggle Block</Button>
    
    			</div>
    		);
    	}
    }
    
    

    But I get the following error

    ERROR in ./~/react-block-ui/style.css
    Module parse failed: /home/hungwenc/1111-drones-map/node_modules/react-block-ui/style.css Unexpected token (1:0)
    You may need an appropriate loader to handle this file type.
    SyntaxError: Unexpected token (1:0)
        at Parser.pp$4.raise (/home/hungwenc/1111-drones-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
        at Parser.pp.unexpected (/home/hungwenc/1111-drones-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
        at Parser.pp$3.parseExprAtom (/home/hungwenc/1111-drones-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
        at Parser.pp$3.parseExprSubscripts (/home/hungwenc/1111-drones-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
        at Parser.pp$3.parseMaybeUnary (/home/hungwenc/1111-drones-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
        at Parser.pp$3.parseExprOps (/home/hungwenc/1111-drones-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
        at Parser.pp$3.parseMaybeConditional (/home/hungwenc/1111-drones-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
        at Parser.pp$3.parseMaybeAssign (/home/hungwenc/1111-drones-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
        at Parser.pp$3.parseExpression (/home/hungwenc/1111-drones-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
        at Parser.pp$1.parseStatement (/home/hungwenc/1111-drones-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
     @ ./src/index.js 31:0-35
    

    Is there any bug in the library?

    opened by hhh146578 8
  • Elements in a blocked area should not accept actions triggered by the keyboard

    Elements in a blocked area should not accept actions triggered by the keyboard

    If I click a button and block its parent, I may still click the button it with space or enter keys.

    Also, I may navigate with tab to the elements inside the blocked area.

    It should block all user's interactions with the children components, not only mouse actions.

    opened by asfernandes 7
  • setImmediate() is a non-standard function

    setImmediate() is a non-standard function

    Hi...got an Reference Error today, and found this is because setImmedaite() got called in componentWillReceiveProps(). can you fix it, I really like react-block-ui :)

    opened by benpptung 6
  • Fix issue #8

    Fix issue #8

    With this fix, you can use tag="div", tag={<WhatEver />} or tag={ variable }

    opened by MrSpoocy 6
  • PropTypes is deprecated in React 15.5

    PropTypes is deprecated in React 15.5

    I was fiddling around upgrading my React project's packages to their latest versions, including React itself, and as I finished the process and ran npm start, I've got the following warning on the console:

    captura de tela 2017-04-14 as 18 04 30

    As you can see, the warning is being generated by this component. So I just wanted to let you guys know about this issue.

    Cheers

    opened by caiorg 6
  • Children lose state on block and unblock

    Children lose state on block and unblock

    I am not sure if I am doing something wrong (I am quite new to react), but when I use BlockUi with children which have a state (like a Form) they get recreated and lose their state on block.

    I tracked down why this happens and it seams to be since BlockUi's render function has an if in which it decides how to render. Each case returns its own element with the children inside but then it seams that react doesn't know that the children inside this two Tag elements are the same and destroys the old one and recreates the new one everytime we block or unblock the component.

    opened by blacktemplar 5
  • fix: added postbuild script to move lib files

    fix: added postbuild script to move lib files

    Fixes redux.js and reduxMiddleware.js files not being moved when build occurs.

    fixes #32 fixes #30

    opened by GoPro16 5
  •  feat(keepInView): add keepInView prop

    feat(keepInView): add keepInView prop

    Closes #14

    enhancement 
    opened by TheSharpieOne 5
  • error when using react component as tag

    error when using react component as tag

    Until now I could use BlockUI with a React component as tag and it worked out as expected, but since the latest update I get the following error:

    this.wrapper.contains is not a function in file BlockUi.js:89

    I debugged it a little bit and saw that there it is expected that this.wrapper is a DOM element to be able to call the contains function. But if tag was a React component this.wrapper will be a react component and won't have a contains function.

    I am not sure if you want to allow React components as tags or not but if you want to allow them this bug should be fixed. In the meantime I went back to using "div" as tag and everything works now.

    opened by blacktemplar 4
  • fix(BlockUI): allow tag to be components

    fix(BlockUI): allow tag to be components

    remove ref from the wrapper element to allow wrapper to be any component (not just DOM elements) the ref is now on the overlay which is the same height and width as the wrapper (per styling) allowing the keepInView logic to work the same.

    fixes #8

    Note: If we do want want to depend on styling (incase someone overrides the styles to make the overlay different), we can use the tab helpers which appear before and after the blocked content as mentioned in https://github.com/Availity/react-block-ui/issues/8#issuecomment-473566646. If this is the case, a new PR can be made.

    opened by TheSharpieOne 4
  • Still able to navigate with tab between inputs and enter data

    Still able to navigate with tab between inputs and enter data

    When the loader appears, the focus is lost but I still can press the tab key to navigate between inputs and enter data there. (Screenshot and video are attached.) Снимок экрана 2021-07-22 в 11 17 41 https://user-images.githubusercontent.com/16920879/126608797-c21dc682-08e0-4a82-aa8c-bbf4b71b5946.mov

    bug 
    opened by Ali-X 0
  • Cannot use react-block-ui with React 17

    Cannot use react-block-ui with React 17

    React 17 is not a peer dependency of react-block-ui so I can't install it without forcing. If react-block-ui works with React 17 the peer dependencies should be updated.

    opened by alealpha2000 2
  • ComponentWillReceiveProps has been renamed, and is not recommended for use.

    ComponentWillReceiveProps has been renamed, and is not recommended for use.

    These warnings keep showing:

    react-dom.development.js:88 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

    • Move data fetching code or side effects to componentDidUpdate.
    • If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
    • Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

    Please update the following components: BlockUi

    opened by prince272 0
  • Question - Block only one child in a list

    Question - Block only one child in a list

    I have the following scenario where we display a list in Cards within the Card we have icons that will trigger an action and API call. When the promise is yet to resolve, we would like to give the user some feedback. I was trying to be clever and use the BlockUI to only block that specific card that the user was interacting with. Can this package do what i'm asking?

    Screen Shot 2021-01-15 at 11 31 23 AM

    opened by diegodesouza 4
  • In combination with MUI and rematch I am getting: Module not found: Can't resolve 'react-block-ui/reduxMiddleware' in

    In combination with MUI and rematch I am getting: Module not found: Can't resolve 'react-block-ui/reduxMiddleware' in

    store.js

    import { init } from '@rematch/core';
    import createPersistPlugin from '@rematch/persist';
    import { routerMiddleware, connectRouter } from 'connected-react-router';
    import { createBrowserHistory } from 'history';
    
    import reduxMiddleware from 'react-block-ui/reduxMiddleware'; // only for redux
    
    import * as models from 'models';
    
    export const history = createBrowserHistory();
    
    const persistPlugin = createPersistPlugin({
      blacklist: [
        'persist',
      ],
      whitelist: [
        'user',
        ...
      ],
    });
    
    export default init({
      models,
      plugins: [persistPlugin],
      redux: {
        reducers: {
          router: connectRouter(history),
        },
        middlewares: [
          reduxMiddleware,
          routerMiddleware(history),
        ],
      },
    });
    

    Error

    image

    Double checking package installation

    image

    opened by josoroma 2
  • Warning | validateDOMNesting For Helper Ref

    Warning | validateDOMNesting For Helper Ref

    Currently if a user wants to override the tag prop of react-block-ui they can but it doesn't account for warnings that may come up if per say we were to have a tag of <tbody>

    Example Code:

    <BlockUI tag="tbody">
       <td>hello</td>
    </BlockUI>
    

    rendered HTML

    <tbody>
       <td>hello</td>
       <span />
    </tbody>
    
    Warning: validateDOMNesting(...): <span> cannot appear as a child of <tbody>.
    

    Code Link

    I would suggest the we move the span ref helper out of the component and return BlockUI as a fragment of both. Then we can just have the span grab the same element from helper.previousSibling to allow any tag to be overridden for the BlockUI tag prop.

    opened by GoPro16 1
  • Support React 16.9

    Support React 16.9

    Prepend UNSAFE_ to lifecycle methods

    opened by TheRusskiy 8
  • React 16.9 warning - componentWillReceiveProps

    React 16.9 warning - componentWillReceiveProps

    Just an FYI... with react 16.9 I see the warning below. Seems componentWillReceiveProps is used in one place in the src (and a few places in tests).

    react-dom.development.js:11494 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.
    
    * Move data fetching code or side effects to componentDidUpdate.
    * If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
    * Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.
    
    Please update the following components: BlockUi
    
    opened by domehead100 13
  • Warning: unstable_flushDiscreteUpdates

    Warning: unstable_flushDiscreteUpdates

    For react deps:

        "react": "^16.9.0",
        "react-block-ui": "^1.3.1",
        "react-color": "^2.17.3",
        "react-dom": "^16.9.0",
    

    There is now this warning showing up

    Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.
        in BlockUi
    
    help wanted Hacktoberfest 
    opened by iongion 22
  • Move to availity-react

    Move to availity-react

    I am considering moving this over to availity-react and refactoring to hooks as from scanning the code will make the code footprint much smaller. Maintainability-wise would be much easier in one place.

    We can also show the range of options using the storybook knobs as compared to the current docs. We are also writing a better documentation site using gatsby and we can add more documentation into that once it gets released.

    Thoughts @TheSharpieOne? @robmcguinness?

    opened by GoPro16 2
Releases(v1.1.2)
Owner
Availity
Availity delivers revenue cycle and related business solutions for health care professionals.
Availity
A collection of loading spinner components for react

React Spinners A collection of loading spinners with React.js based on Halogen. This package is bootstraped using react-npm-boilerplate Demo Demo Page

David Hu 2k Oct 12, 2021
Loading Bar (aka Progress Bar) for Redux and React

React Redux Loading Bar A React component that provides Loading Bar (aka Progress Bar) for long running tasks. Consists of: React component — displays

Anton Mironov 914 Sep 20, 2021
⚪ SVG-Powered component to easily create skeleton loadings.

SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading). Features ⚙️ Customizable: Feel free to change the colors,

Danilo Woznica 11.6k Oct 13, 2021
:cyclone: Simple react.js component for an inline progress indicator

react-progress-button Simple React component for a circular Progress Button. Demo Install npm install react-progress-button --save Example Controlled

Mathieu Dutour 517 Sep 11, 2021
react-loader - React component that displays a spinner via spin.js until your component is loaded.

react-loader react-loader provides your React.js component a simple mechanism for rendering a loading spinner (via spin.js) while data is loading, suc

Cognizant Studio 529 Sep 16, 2021
Make beautiful, animated loading skeletons that automatically adapt to your app.

react-loading-skeleton Make beautiful, animated loading skeletons that automatically adapt to your app. Basic usage Install by npm/yarn with react-loa

David Tang 2.4k Oct 13, 2021
Amazing collection of React spinners components with pure css

React Spinners CSS Loaders (Vue, Angular) Amazing collection of React spinners components with pure css. The React spinners are based on loading.io an

Josh Kuttler 274 Sep 24, 2021
A collection of loading indicators animated with CSS for React

react-spinkit A collection of loading indicators animated with CSS for React Currently I've ported all the spinner animations from Spinkit. If you hav

Kyle Mathews 1.4k Oct 2, 2021
❄️ The ultimate Line Progress Bar UI for React - Supports 🌸 Natural color gradients & ☃️ Coherent border rounding

Frogress ❄️ The ultimate Line Progress Bar UI for React @frogress/line ?? Installation # Install peer depedencies yarn add react react-dom styled-comp

Junho Yeo 12 Sep 6, 2021
Creates a download handler function and gives progress information

Creates a download handler function and gives progress information

Olavo Parno 57 Sep 15, 2021
Progress component for React and React Native

react-progress-label Progress component for React and React Native Installation yarn add react-progress-label npm install react-progress-label --save

SWIFT CARROT Technologies 95 May 16, 2021