LoadMask - Getting started
Zippytech React Toolkit is distributed via npm. So getting it installed is as easy as:
$ npm install @zippytech/react-toolkit --save
Or, if you are using yarn you have to run:
$ yarn add @zippytech/react-toolkit
To start using the <LoadMask />, all you need to import is React, the code and styles of the component itself: @zippytech/react-toolkit/LoadMask and @zippytech/react-toolkit/LoadMask/index.css.
In order for the <LoadMask /> component to be rendered as intended, this must be rendered inside an HTML element, with a non-static position (position is one of the following: absolute, relative or fixed).
The <LoadMask /> component has position: absolute;, width: 100%;, height: 100% so it fills up all the available space inside its offsetParent.
The most important prop of the <LoadMask /> is the visible boolean prop with the default value of true. If this is set to false the <LoadMask /> will not be visible (it will still be rendered, but will have display: none).
You can add a text or any valid React.Node as children to the mask and it will be rendered below the spinner.