loading-wrapper v1.0.5

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