UI components


A library of custom react components for use in UI development

Features

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

Installation

@nbcom/UI requires Node.js v16+, @nbcom/ui to
run.

Install the package

``sh
npm install @nbcom/ui
`

Modal

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();
}
`

Margin

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";

1x, xs: 2x, lg: 5x}} >