BlockUI

BlockUI can either block other components or the whole page.

Document

Panel

Basic

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Template

Import via Module


import { BlockUI } from 'primereact/blockui';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/blockui/blockui.min.js"></script>

Getting Started

BlockUI is controlled using the blocked property, by default target element to block is the child component. In example below, panel gets blocked with a mask when blockedPanel is enabled and gets unblock when the bound variable is set to false.


export const BlockUIDemo = () => {

    const [blockedPanel, setBlockedPanel] = useState(false);

    const blockPanel = () => {
        setBlockedPanel(true);
    }

    const unblockPanel = () => {
        setBlockedPanel(false);
    }

    return (
        <BlockUI blocked={blockedPanel}>
            <Panel header="Header">
                // content
            </Panel>
        </BlockUI>
    );
}

Full Screen

In full screen mode, instead of a particular element, the whole document gets blocked. Set fullScreen as true in order to enable this functionality.


<BlockUI blocked={blockedPanel} fullScreen>
    // content
</BlockUI>

Properties

Any valid attribute is passed to the root element implicitly, extended properties are as follows;

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
blocked	boolean	false	Controls the blocked state.
fullScreen	boolean	false	When enabled, the whole document gets blocked.
baseZIndex	number	0	Base zIndex value to use in layering.
autoZIndex	boolean	true	Whether to automatically manage layering.
className	string	null	Style class of the element.
style	object	null	Inline style of the element.
template	any	null	Template of mask.