Loading Wrapper
A React component that wraps a tree of components and renders a wrapper div element when provided when
flag is true
. The content can be blurred, overlayed, deactivated; and a custom loading indicator can be added in addition to aforementioned features.
Installation
npm install loading-wrapper
Usage
import React from 'react';
import { LoadingWrapper } from 'loading-wrapper';
const App = () => {
const [loading, setLoading] = useState(false);
const toggleLoading = () => setLoading(loading => !loading);
return (
<React.Fragment>
<button onClick={toggleLoading}>Toggle Loading State</button>
<LoadingWrapper
when={loading}
blur={2}
opacity={1}
indicator={<Spin size="large" />}
overlay="lightyellow"
cursor="progress"
>
<SampleContent />
</LoadingWrapper>
</React.Fragment>
}
LoadingWrapper Props
Prop | Type | Default | Description |
---|---|---|---|
when | boolean | false | Controls when the following styles applied to the wrapped component |
blur | number | 2 | Pixel unit blur value for css blur() function |
opacity | number | 0.5 | Percentage unit opacity value for css opacity property |
inactive | boolean | false | Controls pointer-events and user-select css properties |
overlay | string | none | Background color of the wrapper component for custom indicator |
cursor | string | default | Cursor value for css property cursor when mouse hovered on LoadingWrapper component |
indicator | JSX.Element | null | Custom indicator that is rendered in the center of LoadingWrapper when = true
|