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

<BlockUI blocking={isBlocking}>
  ...
  <OtherComponent />
</BlockUI>

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.scss';
import App from './App';
import { BlockUIProvider } from 'ns-react-block-ui'

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <BlockUIProvider loader="default">
      <App />
    </BlockUIProvider>
  </React.StrictMode>
);

import { useBlockUIContext } from 'ns-react-block-ui'

SomeComponent = () => {
  const { setBlockUI } = useBlockUIContext();
  const blockUI = () => {
    setBlockUI({ blocking: true });
  };

  return (
    <>
      <button onClick={() => blockUI()}>Block Screen</button>
    </>
  );
};

{
    blocking?: boolean;
    message?: string | ReactNode;
    overlayStyle?: CSSProperties;
    loader?: "default" | ReactNode;
    style?: CSSProperties;
    className?: string;
    mode?: "contain" | "stretch" | "full-screen";
    cursor?: "inherit" | "wait" | "default" | "progress" | "not-allowed";
    hideScroll?: boolean;
}

{
    blocking?: boolean;
    message?: string;
    loader?: ReactNode;
}