While awaiting 3rd party data or posting something, it is needed to block user interactions and displaying some spinners (or any other animations) which indicates the loading state of the web page.

BlockUI is implemented as a container component which prevents its children components from user interactions and displays a spinner as soon as its isVisible prop is set true.

Installation

npm install react-dev-comps.block-ui --save

Usage

• Use BlockUI component by wrapping any of your components that needs to have a loading effect.

  import BlockUI from 'react-dev-comps.block-ui';
  
  const MyComponent = ({ isLoadingPageData = false }) => {
  
      return (
       <BlockUI isVisible={isLoadingPageData} coverPage={true}>
         <MyAnyOtherComponent />
       </BlockUI>
      );
  }
  
  export default MyComponent;
  

• You can provide any other spinners or animations that you like instead of default one.

  import BlockUI from 'react-dev-comps.block-ui';
  import MyOwnSpinner from './myOwnSpinner';
  
  const MyComponent = ({ isLoadingPageData = false }) => {
  
      return (
       <BlockUI isVisible={isLoadingPageData} spinner={MyOwnSpinner}>
         <MyAnyOtherComponent />
       </BlockUI>
      );
  }
  
  export default MyComponent;
  

• You can use it as your Suspense fallback.

  import BlockUI from 'react-dev-comps.block-ui';
  
  const wrapper = Comp => () => (
    <Suspense fallback={<BlockUI isVisible={true} />}>
      <Comp />
    </Suspense>
  );
  
  export default MyComponent;
  

API

react-dev-comps.block-ui exposes a React Component which takes the following props:

• isVisible: A boolean, that indicates the displaying condition of the BlockUI. Defaults to false
• coverPage: A boolean, that causes BlockUI to cover the whole page or just the underlaying area. Defaults to false
• children: A react children component which will be covered by the BlockUI. Defaults to null
• spinner: A react component which will be replaced with the default spinner that BlockUI provided.

License

Licensed under the MIT License, Copyright © 2019-present.

See LICENSE for more information.