[](nbcomputers.ru)

A library of custom react components for use in UI development
The latest version of the library includes such functionality as:
ModalProvider - A provider that passes all the necessary states to display the modal window
useModal - A custom hook that activates a modal with the component you pass in
@nbcom/UI requires Node.js v16+, @nbcom/ui to
run.
Install the package
``sh`
npm install @nbcom/ui
First you need to wrap the entire project in a ModalProvider that will keep track of the state needed for the modal.
`tsx
import { ModalProvider } from '@nbcom/ui/Modal';
`
After that, using the custom useModal hook, you can activate the modal window anywhere inside components
`tsx`
const { openModal, closeModal } = useModal();
const onClick = () => {
openModal({
content: (
autoWidth: true,
customWidth: 375,
noContentPadding: true,
});
}
const onCancel = () => {
closeModal();
}
Wrap your component which you need to give a margin.
It takes 4 props for every margin direction - ml for margin-left, mb for margin-bottom etc..
Default multiplier is equal to 8, but you can reassign it in your config.
Props takes an a string value which has "x" on the end. You can also use object prop value instead for additional media queries
Example:
`tsx
import { Margin } from "@nbcom/ui";
, xs: 2x, lg: 5x}} >
`
Compiled css:
`less
div {
margin-left: 32px;
margin-top: 8px;
@media (min-width: 480px) {
margin-top: 16px;
}
@media (min-width: 992px) {
margin-top: 40px;
}
}
`
> Important:
> Breakpoints must be filled in the theme file.