ns-react-block-ui

A react component for blocking UI.

---

Document

https://nutthawutkongsopa.github.io/ns-react-block-ui

Installation 🛠️

1npm install ns-react-block-ui

Basic Using ✅

1import { BlockUI } from "ns-react-block-ui";

1<BlockUI blocking={isBlocking}>
2  ...
3  <OtherComponent />
4</BlockUI>

Global Blocking (Context) 🌟

index.js

1import React from 'react';
2import ReactDOM from 'react-dom/client';
3import './index.scss';
4import App from './App';
5import { BlockUIProvider } from 'ns-react-block-ui'
6
7const root = ReactDOM.createRoot(
8  document.getElementById('root') as HTMLElement
9);
10root.render(
11  <React.StrictMode>
12    <BlockUIProvider loader="default">
13      <App />
14    </BlockUIProvider>
15  </React.StrictMode>
16);
17

SomeComponent.js

1import { useBlockUIContext } from 'ns-react-block-ui'
2
3SomeComponent = () => {
4  const { setBlockUI } = useBlockUIContext();
5  const blockUI = () => {
6    setBlockUI({ blocking: true });
7  };
8
9  return (
10    <>
11      <button onClick={() => blockUI()}>Block Screen</button>
12    </>
13  );
14};

Properties 🍀

BlockUI Properties

1{
2    blocking?: boolean;
3    message?: string | ReactNode;
4    overlayStyle?: CSSProperties;
5    loader?: "default" | ReactNode;
6    style?: CSSProperties;
7    className?: string;
8    mode?: "contain" | "stretch" | "full-screen";
9    cursor?: "inherit" | "wait" | "default" | "progress" | "not-allowed";
10    hideScroll?: boolean;
11}

BlockUI Context Data

1{
2    blocking?: boolean;
3    message?: string;
4    loader?: ReactNode;
5}

Compatible Version ⚖️

Version	React Version	Node Version
0.1.8	16.13.1	>=14.0.0
0.1.11	16.13.1	>=14.0.0
0.2.4	16.13.1	>=14.0.0
0.2.6	>=16.13.1	>=14.0.0
1.x.x	>=16.13.1	>=14.0.0