React block-ui component with a built-in, lightweight spinner.
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.
;const MyComponent = {return<BlockUI isVisible=isLoadingPageData coverPage=true><MyAnyOtherComponent /></BlockUI>;}; -
You can provide any other spinners or animations that you like instead of default one.
;;const MyComponent = {return<BlockUI isVisible=isLoadingPageData spinner=MyOwnSpinner><MyAnyOtherComponent /></BlockUI>;}; -
You can use it as your Suspense fallback.
;const wrapper =<Suspense fallback=<BlockUI isVisible=true />><Comp /></Suspense>;;
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 falsecoverPage
: A boolean, that causes BlockUI to cover the whole page or just the underlaying area. Defaults to falsechildren
: A react children component which will be covered by the BlockUI. Defaults to nullspinner
: 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.