1.0.13 • Published 1 year ago
ns-react-block-ui v1.0.13
ns-react-block-ui
A react component for blocking UI.
Document
https://nutthawutkongsopa.github.io/ns-react-block-ui
Installation 🛠️
npm install ns-react-block-ui
Basic Using ✅
import { BlockUI } from "ns-react-block-ui";
<BlockUI blocking={isBlocking}>
...
<OtherComponent />
</BlockUI>
Global Blocking (Context) 🌟
index.js
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>
);
SomeComponent.js
import { useBlockUIContext } from 'ns-react-block-ui'
SomeComponent = () => {
const { setBlockUI } = useBlockUIContext();
const blockUI = () => {
setBlockUI({ blocking: true });
};
return (
<>
<button onClick={() => blockUI()}>Block Screen</button>
</>
);
};
Properties 🍀
BlockUI Properties
{
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;
}
BlockUI Context Data
{
blocking?: boolean;
message?: string;
loader?: ReactNode;
}
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 |
1.0.13
1 year ago
1.0.9
1 year ago
1.0.8
1 year ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.11
1 year ago
1.0.10
1 year ago
1.0.12
1 year ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
0.2.6
2 years ago
1.0.0
2 years ago
0.2.4
2 years ago
0.2.3
2 years ago
0.2.2
2 years ago
0.2.1
2 years ago
0.1.11
2 years ago
0.1.10
2 years ago
0.1.9
2 years ago
0.1.8-rc.0
2 years ago
0.1.8
2 years ago
0.1.7-rc.1
2 years ago
0.1.7-rc.0
2 years ago
0.1.6
2 years ago
0.1.5
2 years ago
0.1.4
2 years ago
0.1.3
2 years ago
0.1.2
2 years ago
0.1.1
2 years ago
0.1.0
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago