@zippytech/react-load-mask

react-load-mask

A carefully crafted LoadMask for React

Install

$ npm i @zippytech/react-load-mask --save

Key features

• adjustable size
• adjustable visibility
• easily themeable
• css animations
• small footprint

Usage

import '@zippytech/react-load-mask/index.css'
import LoadMask from '@zippytech/react-load-mask'

<LoadMask visible={true} />
<LoadMask visible={true} size={20} />
<LoadMask visible={false} size={120} />

Props

• visible - defaults to false. Set to true if you want the LoadMask to be visible.
• size - defaults to 40. The size of the loader inside the LoadMask
• theme - defaults to "default". See the theming section below.

Theming

The base css class of the component is @zippytech/react-load-mask.

For having the default theme, just import @zippytech/react-load-mask/index.css. Basically, that uses @zippytech/react-load-mask/base.css (the functional styles) AND @zippytech/react-load-mask/theme/default.css (the default theme styles).

If you want to use/build another theme, you can render the LoadMask as:

<LoadMask theme="custom" visible />

The code above makes the LoadMask component have the zippy-react-load-mask--theme-custom className.

LICENSE

Apache2