🚀 DAY 5 OF LAUNCH WEEK: Introducing Socket Firewall Enterprise.Learn more →

Book a Demo Install Sign in

@n3/kit

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@n3/kit

React components for n3 interfaces

npm

Version: 0.30.2

Version published: 5 months ago

Weekly downloads: 872

Maintainers: 11

Weekly downloads

Created: 8 years ago

Source

Alert

Компонент уведомления.

import {
  Alert,
  alertTypes,
} from '@n3/kit/Alert';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
type	+	enum - alertTypes.INFO - alertTypes.WARNING - alertTypes.DANGER - alertTypes.SUCCESS		Тип сообщения
title		node	`null`	Заголовок сообщения
button		node	`null`	Кнопка действий у сообщения
noMargins		bool	`false`	Если true, сообщение ренедерится без отступов сверху и снизу
children		node	`null`

AsyncCreatable

Стилизованный react-select/creatable + react-select-async-paginate.

import { AsyncCreatable } from '@n3/kit/AsyncCreatable';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
allowCreateWhileLoading		boolean
formatCreateLabel		(inputValue: string) => ReactNode
isValidNewOption		(inputValue: string, value: any, options: OptionsType) => boolean
getNewOptionData		(inputValue: string, optionLabel: ReactNode) => any
onCreateOption		(inputValue: string) => void
createOptionPosition		"first"	"last"
small		boolean	false	Маленькое ли поле
isMulti		boolean	false	Множественный выбор
isClearable		boolean	true	Возможность сброса значения
hasError		boolean	false	Есть ли у поля ошибка
hasWarning		boolean	false	Есть ли у поля предупреждение
value		any	null	Значение поля
selectRef		Ref		ref для получения экземпляра react-select
renderModal		`(renderProps: ModalSelectButtonModalRenderProps<ValueType>) => ReactNode`	undefined	Функция рендера содержимого модального окна
isDisabled		boolean	false	Выключено ли поле
getOptionLabel		GetOptionLabel	null	Функция получения заголовка опции для вывода и фильтрации
labelKey		string	"label"	Ключ, для получения заголовка опции в случае, если не определено getOptionLabel
getOptionValue		GetOptionValue	null	Функция получения значения опции
valueKey		string	"value"	Ключ, для получения значения опции в случае, если не определено getOptionValue
onChange		(nextValue: any) => void	"(): void => {}"	Обработчик изменения значения поля @param nextValue - новое значение поля
loadOptions		LoadOptions<any, any>		Асинхронная функция запроса данных с сервера в формате react-select-async-paginate @param search - значение строки поиска @param prevOptions - список загруженных опций @param additional - дополнительные параметры запроса @returns ответ сервера
additional		any		Дополнительные параметры первого запроса
debounceTimeout		number		Задержка при отправке запросов
cacheUniqs	+	any[]		Список значений при изменении одного из которых опции будут сброшены

Autocomplete

Автокомплит.

import { Autocomplete } from '@n3/kit/Autocomplete';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
loadOptions	+	LoadOptions		Функция загрузки опций @param search - текущее значение поля ввода @returns response.options - опции
value	+	string		Значение элемента input
onChange		OnChange		Обработчик изменения значения поля при ручном вводе
onSelect		OnSelect		Обработчик изменения значения поля при выборе из меню @param value - текст выбранной опции @param option - выбранная опция
disabled		boolean	false	Выключено ли поле
hasError		boolean	false	Есть ли у поля ошибка
hasWarning		boolean	false	Есть ли у поля предупреждение
inputProps		HTMLProps<HTMLInputElement>	"{}"	Дополнительные props элемента input
labelKey		string	"label"	Ключ, по которому хранится текст опции
getOptionLabel		GetOptionLabel		Функция получения текста опции, который будет подставлен при выборе
formatOptionLabel		FormatOptionLabel		Функция отображения опции

AxiosErrorPage

Страницы ошибки, полученной с помощью axios.

import { AxiosErrorPage } from '@n3/kit/AxiosErrorPage';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
error	+	AxiosError		Ошибка axios

Breadcrumbs

Компонент хлебных крошек.

import { Breadcrumbs } from '@n3/kit/Breadcrumbs';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
breadcrumbs	+	arrayOf [ shape { - url string - title string } ]		массив объектов хлебных крошек
homeLink		string	`undefined`	Ссылка на домашнюю страницу

Button

Компонент кнопки.

import {
  Button,
  buttonColors,
  ButtonIcon,
  buttonSizes,
} from '@n3/kit/Button';

Props

Button

Название	Тип	Значение по умолчанию	Описание
color	`ButtonColor`	Цвет кнопки
size	`ButtonSize`	Размер кнопки
component	elementType	`'button'`	Компонент корневого элемента кнопки
componentProps	object	`{}`	Дополнительный props компонента кнопки при использовании кастомного component
loading	bool	`false`	Состояние загрузки
disabled	bool	`false`	Кнопка выключена
pressed	bool	`false`	Кнопка зажата
flatLeft	bool	`false`	Не отображать закругления слева
flatRight	bool	`false`	Не отображать закругления справа
onlyIcon	bool	`false`	Кнопка состоит только из иконки
className	string	`''`	Дополнительный класс корневого компонента кнопки
onClick	func	`Function.prototype`	Обработчик нажатия на кнопку
children	node	`null`

ButtonIcon

Компонент для выравнивания иконок относительно границ и текста кнопки.

<Button>
  Скачать
  <ButtonIcon
    isRight
  >
    <i className="fa fa-download" />
  </ButtonIcon>
</Button>

Название	Обязательность	Тип	Значение по умолчанию	Описание
isLeft		bool	`false`	Иконка находится слева от текста
isRight		bool	`false`	Иконка находится справа от текста

ButtonDropdown

Кнопка-дропдаун.

import { ButtonDropdown } from '@n3/kit/ButtonDropdown';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
dropdown	+	DropdownBase		props компонента Dropdown
hasArrow		boolean	`false`	Показывать ли стрелку справа от текста
children		ReactNode	`null`	Содержимое кнопки
...rest		Object		props, которые будут переданы в кнопку

ButtonGroup

Группа кнопок.

import { ButtonGroup } from '@n3/kit/ButtonGroup';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
borderCollapse		boolean	`false`	Должны ли соседние кнопки иметь общую границу
...rest		Object		props, которые будут переданы в каждую кнопку

ButtonLink

Ссылка react-router-dom, стилизованная под кнопку.

import { ButtonLink } from '@n3/kit/ButtonLink';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
icon	-	ReactNode	`undefined`	Иконка кнопки
onlyIcon	-	boolean	`undefined`	Отображать только иконку внутри кнопки
to	+	any		Параметр ссылки react-router-dom
target		string	`undefined`	Параметр ссылки react-router-dom
disabled		boolean	`false`	Выключена ли кнопка

ButtonModal

Кнопка, открывающая модальное окно.

import { ButtonModal } from '@n3/kit/ButtonModal';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
renderModal	+	(renderProps: { closeModal: () => void; }) => ReactNode		Функция рендера модального окна
modalSize		`ModalSize`		Размер модального окна
hasCloseButton		`boolean`		Отображается ли кнопка закрытия окна
isHideOnBackdropClick		`boolean`		Закрывать ли окно при нажатии вне окна
...rest		`Omit<ButtonProps, 'component'	'componentProps'>`

ButtonToolbar

Тулбар кнопок.

import { ButtonToolbar } from '@n3/kit/ButtonToolbar';

Props

Название	Тип	Значение по умолчанию	Описание
align	enum - 'left' - 'right'	`'left'`	Выравнивание кнопок внутри
indent	enum - 'default' - 'small'	`'default'`	Расстояние между кнопками
children	node	`null`

ButtonWithDropdown

Кнопка с выпадающим списком.

import { ButtonWithDropdown } from '@n3/kit/ButtonWithDropdown';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
size		ButtonSize		Размер кнопки
component		ButtonComponent	`undefined`	Компонент корневого элемента кнопки
Компонент кнопки
componentProps		{ [key: string]: any; }	`undefined`	Дополнительный props компонента кнопки при использовании кастомного component
Дополнительные props кнопки
loading		boolean	`false`	Состояние загрузки
Находится ли кнопка в состоянии загрузки
disabled		boolean	`false`	Кнопка выключена
Выключены ли кнопка и дропдаун
pressed		boolean		Кнопка зажата
flatLeft		boolean		Не отображать закругления слева
flatRight		boolean		Не отображать закругления справа
onlyIcon		boolean		Кнопка состоит только из иконки
className		string		Дополнительный класс корневого компонента кнопки
onClick		Function	`Function.prototype`	Обработчик нажатия на кнопку
Обработчик нажатия на кнопку
children		ReactNode	`null`	Текст кнопки
dropdown	+	DropdownBase		props компонента Dropdown
buttonDisabled		boolean	`false`	Выключена ли кнопка
color		ButtonColor	`buttonColors.DEFAULT`	Цвет
dropdownDisabled		boolean	`false`	Выключена ли кнопка открытия выпадающего списка

Cell

Ячейка внутри Row.

Props

Название	Тип	Значение по умолчанию	Описание
isPercenage	`boolean`	`false`	Пропорциональная ширина колонки относительно контейнера
xs	1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12	`null`	Количество колонок в разрешениях до 576px
sm	1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12	`null`	Количество колонок в разрешениях до 768px
md	1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12	`null`	Количество колонок в разрешениях до 992px
lg	1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12	`null`	Количество колонок в разрешениях до 1200px
xl	1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12	`null`	Количество колонок в разрешениях от 1200px включительно

Checkbox

Чекбокс.

import { Checkbox } from '@n3/kit/Checkbox';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
checked	+	boolean		выбран ли данный чекбокс
name		string	""	name html-элемента input, а также аргумент колбэка onChange
value		ReactText	""	value html-элемента input, а также аргумент колбэка onChange
disabled		boolean	false	выключен ли данный чекбокс
hasError		boolean	false	подсветка ошибки
hasWarning		boolean	false	подсветка предупреждения
indeterminate		boolean	false	находится ли данный чекбокс в неопределённом состоянии
helpText		ReactNode	null	текст/контент, всплывающий при наведении на чекбокс
label		ReactNode	null	текст/контент, выводящийся рядом с чекбоксом
onChange		OnCheckboxChange	"(): void => {}"	хэндлер изменения значения, вызывается с параметрами: (nextChecked, value, name)

CheckboxGroup

Группа чекбоксов.

import { CheckboxGroup } from '@n3/kit/CheckboxGroup';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
inline		boolean	false	инлайновый вывод чекбоксов
name		string	""	name каждого html-элемента input
value	+	ReactText[]		массив значений выбранных опций
disabled		boolean	false	выключена ли данная группа чекбоксов
options	+	Record<string, any>[]		список опций данной группы чекбоксов
valueKey		string	"value"	ключ, по которому хранятся значения в объектах options
labelKey		string	"label"	ключ, по которому хранятся заголовки в объектах options
onChange		(nextValue: ReactText[]) => void	"(): void => {}"	хэндлер изменения значения

ClearButton

Кнопка очистки поля.

import { ClearButton } from '@n3/kit/ClearButton';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
as		ComponentType	`'span'`	Корневой компонент
...rest		ComponentProps		Дополнительные `props` компонента `as`

Counter

Счётчик.

import { Counter } from '@n3/kit/Counter';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
counter	+	number		Значение счётчика
maxNumber		number	`null`	Максимальное значение счётчика
isLight		bool	`false`	Отображение в светлых цветах

Creatable

Стилизованный react-select/creatable.

import { Creatable } from '@n3/kit/Creatable';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
allowCreateWhileLoading		boolean
formatCreateLabel		(inputValue: string) => ReactNode
isValidNewOption		(inputValue: string, value: any, options: OptionsType) => boolean
getNewOptionData		(inputValue: string, optionLabel: ReactNode) => any
onCreateOption		(inputValue: string) => void
createOptionPosition		"first"	"last"
small		boolean	false	Маленькое ли поле
isMulti		boolean	false	Множественный выбор
isClearable		boolean	true	Возможность сброса значения
hasError		boolean	false	Есть ли у поля ошибка
hasWarning		boolean	false	Есть ли у поля предупреждение
value		any	null	Значение поля
selectRef		Ref		ref для получения экземпляра react-select
renderModal		`(renderProps: ModalSelectButtonModalRenderProps<ValueType>) => ReactNode`	undefined	Функция рендера содержимого модального окна
isDisabled		boolean	false	Выключено ли поле
getOptionLabel		GetOptionLabel	null	Функция получения заголовка опции для вывода и фильтрации
labelKey		string	"label"	Ключ, для получения заголовка опции в случае, если не определено getOptionLabel
getOptionValue		GetOptionValue	null	Функция получения значения опции
valueKey		string	"value"	Ключ, для получения значения опции в случае, если не определено getOptionValue
onChange		(nextValue: any) => void	"(): void => {}"	Обработчик изменения значения поля @param nextValue - новое значение поля
options	+	OptionsType	GroupedOptionsType

createDropdownMenu

Список опций выпадающего меню для приложений на базе @n3/kit.

import { createDropdownMenu } from '@n3/kit/createDropdownMenu';

Пример

import { ButtonDropdown } from '@n3/kit/ButtonDropdown';
import { createDropdownMenu } from '@n3/kit/createDropdownMenu';

// ...

<ButtonDropdown
  dropdown={createDropdownMenu([
    {
      render: ({
        className,
        children,
      }) => (
        <a
          className={className}
          href="http://netrika.ru/"
          target="_blank"
        >
          {children}
        </a>
      ),
      label: 'Ссылка на сайт Нетрики',
    },

    {
      onClick: () => {
        alert('Hello');
      },
      label: 'Алерт',
    },
  ])}
>
  Открыть меню
</ButtonDropdown>

Параметры пункта меню

Название	Обязательность	Тип	Значение по умолчанию	Описание
render		`(renderProps: DropdownMenuItemRenderProps) => ReactNode`	`defaultRender`	Функция рендера компонента
disabled		bool	`false`	Выключен ли данный элемент меню
className		string	`''`	Дополнительный className
onClick		func	`null`
renderIcon		func	`null`	Функция рендера иконки пункта меню @param {Object} renderProps @param {boolean} renderProps.disabled - выключен ли пункт меню
label	+	node		Текст пункта меню

CreateLayout

Лэйаут страницы создания.

import { CreateLayout } from '@n3/kit/CreateLayout';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
breadcrumbs		`Breadcrumb[]`		Массив объектов хлебных крошек
title	+	node		Заголовок страницы
headerBlock		node	`null`	Блок, выводящийся между заголовком страницы и табами
children		node	`null`	Содержимое страницы

createRemoveTableAction

Действие удаления строки таблицы.

import { createRemoveTableAction } from '@n3/kit/createRemoveTableAction';
import { TableActions } from '@n3/kit/TableActions';

// ...

<TableActions
  actions={[
    createRemoveTableAction({}, {
      remove: () => new Promise((resolve) => {
        setTimeout(() => {
          resolve();
        }, 1500);
      }),
      approveTitle: 'Удаление ЕИСТ',
      approveContent: 'Восстановить проект будет невозможно.',
      approveButtonText: 'Удалить проект',
      cancelButtonText: 'Отменить',
      notification: {
        title: 'Успешно',
        content: 'Проект успешно удалён',
      },
    }),
  ]}
/>

Аргументы:

Дополнительные параметры createDropdownMenu;
Параметры useRemoveButton.

Datepicker

Поле ввода даты.

import { Datepicker } from '@n3/kit/Datepicker';

Props

Название	Тип	Значение по умолчанию	Описание
selected	Date		Выбранная дата
disabled	boolean	false	Выключено ли поле
small	boolean	false	Маленькое ли поле
hasError	boolean	false	Есть ли у поля ошибка
hasWarning	boolean	false	Есть ли у поля предупреждение
withTime	boolean	false	Есть ли возможность выбора времени
timeCaption	string	"Время"	Текст над вариантами выбора времени
block	boolean	false	Отображать ли поле во всю ширину
isClearable	boolean	false	Возможность сброса выбранной даты
autoComplete	"on"	"off"	"off"
onChange	(nextDate: Date) => void	"(): void => {}"	Обработчик изменения или сброса значения @param nextDate - новое значение

DebounceInput

Инпут с задержкой.

import { DebounceInput } from '@n3/kit/DebounceInput';

Props

Название	Тип	Значение по умолчанию	Описание
component	InputComponent		Компонент корневого элемента инпута
disabled	boolean		Выключено ли поле
hasError	boolean		Есть ли у поля ошибка
hasWarning	boolean		Есть ли у поля предупреждение
small	boolean		Маленькое ли поле
className	string		Дополнительный класс корневого компонента инпута
isOnlyBorderBottom	boolean		Отображение без рамки только с подчёркиванием снизу
buttons	RenderInputButton[]		Массив функций реднеда кнопок @param props - все props инпута @param index - индекс кнопки
debounceTimeout	number	300	Время задержки в мс

Компонент выпадающего меню.

import { Dropdown } from '@n3/kit/Dropdown';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
hasHorizontalOffsets		bool	`true`	есть ли горизонтальный отступ между элементом и меню
hasVerticalOffsets		bool	`true`	есть ли вертикальный отступ между элементом и меню
renderContent	+	`(renderProps: DropdownContentRenderProps) => ReactNode`		функция рендера содержимого выпадающего меню
placement		string	`'bottom-start'`	позиция меню в формате popper.js
popperStyle		object	`{}`	дополнительные стили popper-компонента
popperProps		objectOf { any }	`{}`	дополнительные опции popper-компонента
modifiers		arrayOf [ object ]	`[]`	modifiers popper-компонента
children	+	func		Функция рендера элемента, открывающего выпадающего меню @param {Object} renderProps @param {boolean} renderProps.isDropdownOpen - открыто ли меню @param {Function} renderProps.onClick - обработчик нажатия на элемент, открывающий/закрывающий меню @param {React ref} renderProps.ref - ref элемента, относительно которого позиционируется выпадающее меню

EditLayout

Лэйаут страницы редактирования.

import { EditLayout } from '@n3/kit/EditLayout';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
breadcrumbs		`Breadcrumb[]`		Массив объектов хлебных крошек
title	+	node		Заголовок страницы
headerBlock		node	`null`	Блок, выводящийся между заголовком страницы и табами
children		node	`null`	Содержимое страницы

EllipsisDropdown

Выпадающий список в виде точек.

import { EllipsisDropdown } from '@n3/kit/EllipsisDropdown';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
dropdown	+	shape { - hasHorizontalOffsets bool - hasVerticalOffsets bool - renderContent func - placement string - popperStyle object - popperProps objectOf { any } - modifiers arrayOf [ object ] }		props компонента Dropdown
className		string	`''`
disabled		bool	`false`

ErrorPage

Страница ошибки.

import { ErrorPage } from '@n3/kit/ErrorPage';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
status	+	number		http-статус
title		ReactNode	`null`	Заголовок страницы
description		ReactNode	`null`	Описание/руководство к действиям

FakeLink

Компонент, стилизованный, как ссылка.

import { FakeLink } from '@n3/kit/FakeLink';

Props

Название	Тип	Значение по умолчанию	Описание
component	React Component	`'span'`
disabled	boolean	`false`	Выключена ли обработка событий
onClick	Function	`null`	Обработчик нажатия, вызывается, если disabled не true

FieldGroup

Обёртка над полем для вывода заголовка, подсказки, ошибок и предупреждений.

import { FieldGroup } from '@n3/kit/FieldGroup';

Props

Название	Тип	Значение по умолчанию	Описание
colon	boolean	`true`	Если `true``, после заголовка выводится двоеточие
direction	`'horizontal'	'vertical'`	`'horizontal'`
onlyField	boolean	false	Если true, поле выводится без заголовка
label	string	undefined	Заголовок поля
required	boolean	false	Обязательность поля
isCellsPercentage	boolean	false	Пропорциональная ширина поля и контейнера для единиц измерения
isInput	boolean	false	Задать отступ заголовка, чтобы он был в одну линию с текстом поля ввода
isShow	boolean	false	Вывод в режиме просмотра (влияет на расстояние между полями)
hasRepeatOffsets	boolean	false	Вывод внутри `Repeat.Block`
hint	ReactNode	undefined	Подсказка, выводящаяся в тултипе рядом с заголовком
unit	ReactNode	undefined	Единицы измерения, выводится справа от поля
help	string[]	undefined	Подсказки поля
errors	string[]	undefined	Ошибки поля
warnings	string[]	undefined	Предупреждения поля
showBackground	boolean	undefined	Менять ли фон поля в случае ошибки или предупреждения
labelColsXs	CellValue	3	Количество колонок заголовка
fieldColsXs	CellValue	5	Количество колонок контента
unitColsXs	CellValue	1	Количество колонок единиц измерения
children	ReactNode	undefined	Контент поля

FieldWrapper

Обёртка над полем для вывода подсказки, ошибок и предупреждений.

import { FieldWrapper } from '@n3/kit/FieldWrapper';

Props

Название	Тип	Значение по умолчанию	Описание
help	string[]	null	Подсказки поля
errors	string[]	null	Ошибки поля
warnings	string[]	null	Предупреждения поля
showBackground	boolean	false	Менять ли фон в случае ошибки или предупреждения
children	ReactNode	null	Поле

FilterSelect

Стилизованный react-select.

import { FilterSelect } from '@n3/kit/FilterSelect';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
small		boolean	false	Маленькое ли поле
isMulti		boolean	false	Множественный выбор
isClearable		boolean	true	Возможность сброса значения
hasError		boolean	false	Есть ли у поля ошибка
hasWarning		boolean	false	Есть ли у поля предупреждение
value		any	null	Значение поля
selectRef		Ref		ref для получения экземпляра react-select
modalComponent		ComponentType		Компонент модального окна @prop {Function} onSelect - функция выбора значения @prop {Function} onCancel - функция закрытия модального окна без изменения значения
modalProps		{ [key: string]: any; }		Дополнительные props компонента модального окна
isDisabled		boolean	false	Выключено ли поле
getOptionLabel		GetOptionLabel	null	Функция получения заголовка опции для вывода и фильтрации
labelKey		string	"label"	Ключ, для получения заголовка опции в случае, если не определено getOptionLabel Ключ для отображения текста поля, работает только в случае, если getOptionLabel не определён
getOptionValue		GetOptionValue	null	Функция получения значения опции
valueKey		string	"value"	Ключ, для получения значения опции в случае, если не определено getOptionValue Ключ для нахождения значения поля, работает только в случае, если getOptionValue не определён
onChange		((nextValue: any) => void)	((nextValue: any) => void)	"(): void => {}"
mainPlaceholder		string	"Выберите..."	Плейсхолдер компонента, который всегда отображается
options	+	OptionsType	GroupedOptionsType

FilterSelectAjax

Стилизованный react-select-fetch.

import { FilterSelectAjax } from '@n3/kit/FilterSelectAjax';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
small		boolean	false	Маленькое ли поле
isMulti		boolean	false	Множественный выбор
isClearable		boolean	true	Возможность сброса значения
hasError		boolean	false	Есть ли у поля ошибка
hasWarning		boolean	false	Есть ли у поля предупреждение
value		any	null	Значение поля
selectRef		Ref		ref для получения экземпляра react-select
modalComponent		ComponentType		Компонент модального окна @prop {Function} onSelect - функция выбора значения @prop {Function} onCancel - функция закрытия модального окна без изменения значения
modalProps		{ [key: string]: any; }		Дополнительные props компонента модального окна
isDisabled		boolean	false	Выключено ли поле
getOptionLabel		GetOptionLabel	null	Функция получения заголовка опции для вывода и фильтрации
labelKey		string	"label"	Ключ, для получения заголовка опции в случае, если не определено getOptionLabel Ключ для отображения текста поля, работает только в случае, если getOptionLabel не определён
getOptionValue		GetOptionValue	null	Функция получения значения опции
valueKey		string	"value"	Ключ, для получения значения опции в случае, если не определено getOptionValue Ключ для нахождения значения поля, работает только в случае, если getOptionValue не определён
onChange		((nextValue: any) => void)	((nextValue: any) => void)	"(): void => { }"
url	+	string		апи-url для запроса данных
queryParams		{ [key: string]: any; }		Перманентные параметры запроса
searchParamName		string		Ключ, по которому текст строки поиска будет добавлен к параметрам запроса
pageParamName		string		Ключ, по которому номер текущей страницы будет добавлен к параметрам запроса
offsetParamName		string		Ключ, по которому индекс первой опции для запроса будет добавлен к параметрам запроса
mapResponse		MapResponse		Функция маппинга ответа сервера в формат react-select-async-paginate
get		Get		Асинхронная функция запроса данных с сервера @param url - апи-url @param queryParams - параметры запроса @returns ответ сервера
debounceTimeout		number		Задержка при отправке запросов
cacheUniqs	+	any[]		Список значений при изменении одного из которых опции будут сброшены
mainPlaceholder		string	"Выберите..."	Плейсхолдер компонента, который всегда отображается

FilterSelectAsync

Стилизованный react-select-async-paginate.

import { FilterSelectAsync } from '@n3/kit/FilterSelectAsync';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
small		boolean	false	Маленькое ли поле
isMulti		boolean	false	Множественный выбор
isClearable		boolean	true	Возможность сброса значения
hasError		boolean	false	Есть ли у поля ошибка
hasWarning		boolean	false	Есть ли у поля предупреждение
value		any	null	Значение поля
selectRef		Ref		ref для получения экземпляра react-select
modalComponent		ComponentType		Компонент модального окна @prop {Function} onSelect - функция выбора значения @prop {Function} onCancel - функция закрытия модального окна без изменения значения
modalProps		{ [key: string]: any; }		Дополнительные props компонента модального окна
isDisabled		boolean	false	Выключено ли поле
getOptionLabel		GetOptionLabel	null	Функция получения заголовка опции для вывода и фильтрации
labelKey		string	"label"	Ключ, для получения заголовка опции в случае, если не определено getOptionLabel Ключ для отображения текста поля, работает только в случае, если getOptionLabel не определён
getOptionValue		GetOptionValue	null	Функция получения значения опции
valueKey		string	"value"	Ключ, для получения значения опции в случае, если не определено getOptionValue Ключ для нахождения значения поля, работает только в случае, если getOptionValue не определён
onChange		((nextValue: any) => void)	((nextValue: any) => void)	"(): void => {}"
loadOptions		LoadOptions<any, any>		Асинхронная функция запроса данных с сервера в формате react-select-async-paginate @param search - значение строки поиска @param prevOptions - список загруженных опций @param additional - дополнительные параметры запроса @returns ответ сервера
additional		any		Дополнительные параметры первого запроса
debounceTimeout		number		Задержка при отправке запросов
cacheUniqs	+	any[]		Список значений при изменении одного из которых опции будут сброшены
mainPlaceholder		string	"Выберите..."	Плейсхолдер компонента, который всегда отображается

Grid

Контейнер содержимого.

import { Grid } from '@n3/kit/Grid';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
centered		boolean	`false`	Добавить ли margin слева и справа
isFixedWidth		boolean	`false`	Не давать контенту сужаться

Header

Шапка страницы.

import { Header } from '@n3/kit/Header';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
logo	+	HeaderLogoParams		Логотип в левой части
isUserBlockHidden		boolean	false	Скрыть ли блок текущего пользователя (аватар + имя + дропдаун с действиями)
showAvatar		boolean		Отображать ли аватар текущего пользователя
avatar		string		Аватар текщего пользователя (отобразится плейсхолдер в случае, если аватар не задан)
userName		ReactNode		Имя текщего пользователя
dropdownOptions		HeaderDropdownOption[]		Опции выпадающего меню
leftBlock		`ReactNode`	`undefined`	Блок слева
menu		HeaderMenuItem[]		Левое меню
rightMenu		HeaderMenuItem[]		Правое меню
withPusher		boolean	false	Добавить ли dom-элемент для отступа сверху страницы, равного высоте шапки
counters		{ [key: string]: number; }		Счётчики
countersMaxNumber		number		Максимальное число в счётчиках
collapsible		boolean		Отображение иконки раскрытия бокового меню на меленьких разрешениях
openMenu		() => void		Функция раскрытия бокового меню
isLogoCollapsible		boolean	false	Схлопывать ли логотип при схлопывании меню
menuCollapsed		boolean	false	Схлопнуто ли меню в иконки

HeaderLeftBlock

Компонент, задающий контент шапки. Должен быть использован внутри компонента Layout.

import { HeaderLeftBlock } from '@n3/kit/Layout';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
children	+	`ReactNode`		Контент, который будет отображён в шапке страницы

Hint

Компонент всплывающей подсказки.

import { Hint } from '@n3/kit/Hint';

// ...

<Hint
  tooltip="Подсказка"
/>

Для кастомизации принимает свойства компонента Tooltip.

Input

Инпут.

import { Input } from '@n3/kit/Input';

Использование

Обычный инпут

import { useState } from 'react';
import { Input } from '@n3/kit/Input';

function Example() {
  const [value, setValue] = useState('');
  
  <Input
    value={value}
    onChange={(event) => {
      setValue(event.target.value);
    }}
  />
}

С кнопкой

import { useState } from 'react';
import {
  Input,
  StyledInputButton,
} from '@n3/kit/Input';

function Example() {
  const [value, setValue] = useState('');
  
  <Input
    value={value}
    onChange={(event) => {
      setValue(event.target.value);
    }}
    buttons={[
      (inputProps, index) => (
        <StyledInputButton
          type="button"
          key={index}
        >
          <FontAwesomeIcon
            icon="cog"
          />
        </StyledInputButton>
      ),

      (inputProps, index) => (
        <StyledInputButton
          type="button"
          key={index}
        >
          <FontAwesomeIcon
            icon="file"
          />
        </StyledInputButton>
      ),
    ]}
  />
}

Props

Input

Название	Тип	Описание
component	InputComponent	Компонент корневого элемента инпута
disabled	boolean	Выключено ли поле
hasError	boolean	Есть ли у поля ошибка
hasWarning	boolean	Есть ли у поля предупреждение
small	boolean	Маленькое ли поле
className	string	Дополнительный класс корневого компонента инпута
isOnlyBorderBottom	boolean	Отображение без рамки только с подчёркиванием снизу
buttons	RenderInputButton[]	Массив функций реднеда кнопок @param props - все props инпута @param index - индекс кнопки

StyledInputButton

Название	Обязательность	Тип	Значение по умолчанию	Описание
disabled		boolean		Кнопка выключена
$small		boolean		Кнопка маленькая

InputMask

Поле ввода с маской.

import { InputMask } from '@n3/kit/InputMask';

Props

Название	Обязательность	Тип	Описание
component		InputComponent	Компонент корневого элемента инпута
disabled		boolean	Выключено ли поле
hasError		boolean	Есть ли у поля ошибка
hasWarning		boolean	Есть ли у поля предупреждение
small		boolean	Маленькое ли поле
className		string	Дополнительный класс корневого компонента инпута
isOnlyBorderBottom		boolean	Отображение без рамки только с подчёркиванием снизу
buttons		RenderInputButton[]	Массив функций реднеда кнопок @param renderProps - объект свойств для ренера
mask	+	boolean \| (string \| RegExp)[] \| ((value: string) => maskArray)	маска в формате react-text-mask

Layout

Компонент, включающий в себя шапку и сайдбар.

import { Layout } from '@n3/kit/Layout';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
header	+	HeaderParams		Объект props компонента Header
sidebar	+	SidebarParams		Объект props компонента Sidebar
collapsible		boolean	true	Возможность скрытия меню на маленьких экранах
menuCollapsed		boolean	false	Схлопнуто ли меню в иконки
openedGroups		{ [key: string]: boolean; }	"{}"	Объект, показывающий, какие группы открыты
counters		{ [key: string]: number; }	"{}"	Счётчики
countersMaxNumber		number	null	Максимальное число в счётчиках
children	+	((renderProps: LayoutContextValue) => ReactNode)		Функция рендера контента @param renderProps
onCollapseMenu		(nextValue: boolean) => void	"(): void => {}"	Обработчик схлопывания меню в иконки @param nextValue - новое состояние схлопнутости
onToggleGroup		(groupId: string, opened: boolean) => void	"(): void => {}"	Обработчик скрытия/раскрытия пунктов меню @param groupId - id группы @param opened - новое состояние открытости/закрытости

LayoutWithoutSidebar

Компонент, включающий в себя шапку и Grid, центрирующий контент.

import { LayoutWithoutSidebar } from '@n3/kit/LayoutWithoutSidebar';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
header	+	HeaderParams		Объект props компонента Header
counters		{ [key: string]: number; }	`{}`	Счётчики
countersMaxNumber		number	`null`	Максимальное число в счётчиках
hasGrid		boolean	`true`	Оборачивать ли содержимое в компонент Grid
grid		GridProps	`{}`	Объект props компонента Grid
children		ReactNode	`null`	Контент

ListLayout

Лэйаут страницы списка.

import { ListLayout } from '@n3/kit/ListLayout';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
breadcrumbs		`Breadcrumb[]`		Массив объектов хлебных крошек
title	+	node		Заголовок страницы
headerBlock		node	`null`	Блок, выводящийся между заголовком страницы и табами
actionsBlock		node	`null`	Блок действий (кнопки и т.п.)
children		node	`null`	Содержимое страницы

ListPlaceholder

Плейсхолдер пустого списка.

import {
  ListPlaceholder,
  ListPlaceholderWithoutFilters,
} from '@n3/kit/ListPlaceholder';

ListPlaceholder - используется в случае, когда применены фильтры
ListPlaceholderWithoutFilters - используется в случае, когда ни один фильтр не применён

Props

Название	Тип	Значение по умолчанию	Описание
children	ReactNode	`'Не найдено ни одной записи'`	Заголовок
renderDescription	RenderDescription	`null`	Руководство к действиям @param params - параметры
reload	() => void	`null`	Функиця перезагрузки списка, по умолчанию очищает параметры адресной строки

LoadingArea

Индикация загрузки для определённой области.

import { LoadingArea } from '@n3/kit/LoadingArea';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
loading		boolean	`true`	Состояние загрузки
children		ReactNode	`null`

LocalStorageLayout

Компонент, аналогичный Layout, хранящий состояние открытости/закрытости пунктов в localStorage.

Модальное окно.

import {
  Modal,
  modalSizes,
} from '@n3/kit/Modal';

...

<Modal
  show={show}
  onHide={toggleShow}
>
  <Modal.Body>
    <Modal.Title>
      Заголовок модального окна
    </Modal.Title>

    <div>
      Контент модального окна
    </div>
  </Modal.Body>

  <Modal.Footer>
    Футер модального окна
  </Modal.Footer>
</Modal>

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
size		enum - modalSizes.DEFAULT - modalSizes.SMALL	`modalSizes.DEFAULT`	Размер модального окна
show	+	bool		Отображается ли модальное окно
hasCloseButton		bool	`true`	Отображается ли кнопка закрытия окна
onHide	+	func		Обработчик закрытия модального окна
isHideOnBackdropClick		bool	`true`	Закрывать ли окно при нажатии вне окна
children		node	`null`

ModalSelect

Поле выбора из модального окна.

import { ModalSelect } from '@n3/kit/ModalSelect';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
renderModal	+	`(renderProps: ModalSelectButtonModalRenderProps<ValueType>) => ReactNode`		Функция рендера содержимого модального окна
disabled		boolean	false	Выключено ли поле
hasError		boolean	false	Есть ли у поля ошибка
hasWarning		boolean	false	Есть ли у поля предупреждение
text	+	string		Текст, выводящийся в поле
placeholder		string	""
onChange		(nextValue: any) => void	"(): void => {}"	Обработчик изменения значения поля

ModalSelectButton

Кнопка, открывающая модальное окно для выбора.

import { ModalSelectButton } from '@n3/kit/ModalSelectButton';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
className		string	""
renderModal	+	`(renderProps: ModalSelectButtonModalRenderProps<ValueType>) => ReactNode`		Функция рендера содержимого модального окна
disabled		boolean	false
onSelectFromModal		(nextValue: any) => void	"(): void => {}"

NestedListLayout

Лэйаут страницы списка внутри родительской сущности.

import { NestedListLayout } from '@n3/kit/NestedListLayout';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
breadcrumbs		`Breadcrumb[]`		Массив объектов хлебных крошек
parentTitle	+	node		Заголовок родительской сущности
parentActionsBlock		node		Блок действий у заголовка родительской сущности (кнопки и т.п.)
parentStatus		node	`null`	Статус
parentStatusColor		TagColor	`undefined`	Цвет тэга статуса
headerBlock		node	`null`	Блок, выводящийся между заголовком страницы и табами
tabs		`Tab[]`		Табы родительской сущности
currentTab	+	any		id выбранного таба
title	+	node		Заголовок страницы
actionsBlock		node	`null`	Блок действий (кнопки и т.п.)
children		node	`null`	Содержимое страницы

NestedRoutesLayout

Пример использования:

import { NestedRoutesLayout } from '@n3/kit/NestedRoutesLayout';

// ...

const data = await fetch(/* ... */);

const NestedRoute = ({
  Layout,
  payload,
}) => (
  <Layout
    title="Вложенный заголовок"
    breadcrumbs={[{
      url: null,
      title: 'Дополнительная крошка',
    }]}
  >
    Контент
  </Layout>
);

<NestedRoutesLayout
  breadcrumbs={[{
    url: '/',
    title: 'Хлебная крошка',
  }]}
  title="Основной заголовок"
  tabs={[
    {
      id: 'tabId',
      title: 'Заголовок таба',
      to: '/tab/',
      component: NestedRoute,
    },
  ]}
  payload={data}
/>

Props NestedRoutesLayout

Название	Обязательность	Тип	Значение по умолчанию	Описание
breadcrumbs	+	`Breadcrumb[]`		Массив объектов хлебных крошек
title	+	node		Заголовок страницы
actionsBlock		node		Блок действий у заголовка сущности (кнопки и т.п.)
status		node	`null`	Статус
statusColor		`TagColor`	`undefined`	Цвет тэга статуса
headerBlock		node	`null`	Блок, выводящийся между заголовком страницы и табами
tabs		`NestedRoutesLayoutTab<Payload>[]`		Табы
redirectFrom		string	`null`	Переадресация из
redirectTo		string	`null`	Переадресация в
payload		`Payload`	`null`	Данные, которые будут переданы во вложенные страницы

Props Layout

Название	Тип	Значение по умолчанию	Описание
breadcrumbs	`Breadcrumb[]`		Дополнительные хлебные крошки
title	node		Заголовок вложенной страницы
actionsBlock	node		Блок действий вложенной страницы
children	node	`null`	Содержимое страницы

Формат таба

Название	Обязательность	Тип	Значение по умолчанию	Описание
id	+	`TabId`		id таба
title	+	node		Заголовок таба
path		`string`		Путь страницы для `react-router-dom`, если не определено, используется `to`
to	+	`string`		url страницы
component	+	`ComponentType<NestedRouteComponentProps<any, any>>`	`null`	Компонент страницы

NestedShowLayout

import { NestedShowLayout } from '@n3/kit/NestedShowLayout';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
breadcrumbs		`Breadcrumb[]`		Массив объектов хлебных крошек
title	+	node		Заголовок страницы
actionsBlock		node		Блок действий у заголовка сущности (кнопки и т.п.)
status		node	`null`	Статус
statusColor		`TagColor`	`undefined`	Цвет тэга статуса
headerBlock		node	`null`	Блок, выводящийся между заголовком страницы и табами
tabs		`Tab[]`		Табы
currentTab	+	any		id выбранного таба
children		node	`null`	Содержимое страницы

PageSizeSelect

Компонент выбора количества элементов на странице для приложений на базе @n3/kit.

import { PageSizeSelect } from '@n3/kit/PageSizeSelect';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
start	+	number		Порядковый номер первого элемента
end	+	number		Порядковый номер последнего элемента
count	+	number		Общее количество элементов
value	+	number		Выбранное значение
options		number[]	`[20, 40, 100]`	Список возможных значений
onChange	+	(nextValue: number) => void		Обработчик изменения значения @param nextValue - новое значение
toggleButtonId		string	`''`	id кнопки открытия/закрытия меню
wrapperId		string	`''`	id корневого элемента

PageTitle

Заголовок страницы.

import { PageTitle } from '@n3/kit/PageTitle';

Props

Название	Тип	Значение по умолчанию	Описание
pageType	enum - 'list' - 'form' - 'parent'	`'list'`	Тип страницы
actionsBlock	ReactNode	`null`	Блок действий (кнопки и т.п.)
status	ReactNode	`null`	Статус
statusColor	TagColor	`'gray`	Цвет тэга статуса
children	node	`null`	Заголовок страницы

Paginator

Пагинатор.

import { Paginator } from '@n3/kit/Paginator';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
page	+	number		Текущая страница пагинатора, начиная с 1
pageCount	+	number		Количество страниц
hrefBuilder		func	`undefined`	Функция генерации атрибута href компонента <a> @param {number} page - номер страницы, начиная с 1
onPageChange	+	func		Обработчик изменения страницы @param {number} page - номер страницы, начиная с 1
wrapperId		string		id корневого dom-элемента

parseLayoutFromLocalStorage

Парсинг состояния Layout из localStorage.

import { parseLayoutFromLocalStorage } from '@n3/kit/LocalStorageLayout';

Provider

Компонент для задания глобальных параметров компонентов.

import { Provider } from '@n3/kit/Provider';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
children		`ReactNode`	`undefined`
theme	+	`ThemeType`		Тема в формате `@n3/css-base`

Radio

Радиокнопка.

import { Radio } from '@n3/kit/Radio';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
value	+	ReactText		value html-элемента input, также передаётся в колбэке onChange
checked	+	boolean		выбрано
disabled		boolean	`false`	выключено
name		string	`""`	name html-элемента input
label		ReactNode	`null`	текст/контент, выводящийся рядом с радио
onChange		(value: ReactText) => void	`(): void => {}`	хэндлер изменения значения, вызывается с параметрами: (newChecked)

RadioGroup

Группа радиокнопок.

import { RadioGroup } from '@n3/kit/RadioGroup';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
inline		boolean	false	инлайновый вывод
name		string	""	name каждого html-элемента input
value		ReactText	null	значение выбранной опции
disabled		boolean	false	выключена ли данная группа радио
options	+	Record<string, any>[]		список опций данной группы радио
valueKey		string	"value"	ключ, по которому хранятся значения в объектах options
labelKey		string	"label"	ключ, по которому хранятся заголовки в объектах options
onChange		(value: ReactText) => void	"(): void => {}"	хэндлер изменения значения

RemoveButton

Кнопка удаления.

import { RemoveButton } from '@n3/kit/RemoveButton';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
color		enum - buttonColors.DEFAULT - buttonColors.PRIMARY - buttonColors.TERTIARY - buttonColors.DANGER	`undefined`	Цвет кнопки
size		enum - buttonSizes.DEFAULT - buttonSizes.SMALL	`undefined`	Размер кнопки
disabled		bool	`false`	Выключена ли кнопка
children	+	node
remove	+	func		Асинхронная функция удаления
onRemoveSuccess		func	`undefined`	Обработчик успешного удаления
approveTitle		node	`undefined`	Заголовок подтверждения
approveContent		node	`undefined`	Текст подтверждения
approveButtonText	+	string		Текст кнопки подтвеждения
approveButtonColor		enum - buttonColors.DEFAULT - buttonColors.PRIMARY - buttonColors.TERTIARY - buttonColors.DANGER	`buttonColors.DANGER`	Цвет кнопки подтверждения
cancelButtonText	+	string		Текст кнопки отмены
errorsPath		string	`'response.data.detail'`	Путь до объекта ошибкок в случае ошибки удаления
redirectTo		any	`undefined`	Адрес редиректа в случае успешного удаления
notification		object	`undefined`	Сообщение @n3/browser-messages в случае успешного удаления

Repeat

Повторяющиеся блоки.

import { Repeat } from '@n3/kit/Repeat';

<Repeat
  title="Группа полей"
>
  <Repeat.Block
    index={0}
  >
    Блок №1
  </Repeat.Block>

  <Repeat.Block
    index={1}
  >
    Блок №2
  </Repeat.Block>

  <Repeat.Block
    index={2}
  >
    Блок №3
  </Repeat.Block>
</Repeat>

Props

Repeat

Название	Тип	Значение по умолчанию	Описание
disabled	boolean	false	Выключена ли кнопка добавления
title	ReactNode	null	Заголовок
addButtonTitle	ReactNode	"Добавить ещё"	Текст кнопки добавления
handleAdd	() => void	null	Обработчик нажания на кнопку добавления, если не определён, кнопка добавления не отображается

Repeat.Block

Название	Обязательность	Тип	Значение по умолчанию	Описание
disabled		boolean	false	Выключена ли кнопка удаления
title		ReactNode	null	Заголовок
index	+	number		Индекс в последовательности блоков
hasHorizontalPadding		boolean	true	Есть ли отступ от левой и правой границ до контента
handleRemove		(index: number) => void	null	Обработчик нажания на кнопку удаления, если не определён, кнопка удаления не отображается @param index - индекс блока в массиве

Row

import { Row } from '@n3/kit/Row';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
isWrap		boolean	`false`	Рендер внутренних блоков c переносами
$rowGap		string \| number	`undefined`	Отступ между строками Если число, берётся соответсвующий отступ из темы Если строка, она напрямую используется для свойства `rowGap`

SearchInput

Поле поиска.

import { SearchInput } from '@n3/kit/SearchInput';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
component		InputComponent		Компонент корневого элемента инпута
disabled		boolean	false	Выключено ли поле Выключено ли поле
hasError		boolean		Есть ли у поля ошибка
hasWarning		boolean		Есть ли у поля предупреждение
small		boolean		Маленькое ли поле
className		string		Дополнительный класс корневого компонента инпута
isOnlyBorderBottom		boolean		Отображение без рамки только с подчёркиванием снизу
buttons		RenderInputButton[]		Массив функций реднеда кнопок @param props - все props инпута @param index - индекс кнопки
value	+	string		Значение поля
onChange		(event: ChangeEvent) => void	"(): void => { }"	Обработчик изменения инпута @param event - событие
onValueChange		(nextValue: string) => void	"(): void => { }"	Обработчик изменения значения поля (в т.ч. при нажатии на кнопку сброса) @param newValue - новое значение поля
handleClear		() => void	"(): void => { }"	Обработчик нажатия на кнопку сброса
handleSearch		(searchValue: string) => void	"(): void => { }"	Обработчик нажатия на кнопку поиска @param searchValue - текущее значение поля поиска

Section

Секция.

import { Section } from '@n3/kit/Section';

Props

Название	Тип	Значение по умолчанию	Описание
title	string	null	Заголовок секции
titleColsXs	CellValue	3	Количество колонок заголовка
contentColsXs	CellValue	8	Количество колонок контента
hint	ReactNode	null	Подсказка, выводящаяся у заголовка поля
isEdit	boolean	false	Используется ли внутри формы редактирования
children	ReactNode	null	Контент

Select

Селект.

import { Select } from '@n3/kit/Select';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
small		boolean	false	Маленькое ли поле
isMulti		boolean	false	Множественный выбор
isClearable		boolean	true	Возможность сброса значения
hasError		boolean	false	Есть ли у поля ошибка
hasWarning		boolean	false	Есть ли у поля предупреждение
value		any	null	Значение поля
selectRef		Ref		ref для получения экземпляра react-select
renderModal		`(renderProps: ModalSelectButtonModalRenderProps<ValueType>) => ReactNode`	undefined	Функция рендера содержимого модального окна
isDisabled		boolean	false	Выключено ли поле
getOptionLabel		GetOptionLabel	null	Функция получения заголовка опции для вывода и фильтрации
labelKey		string	"label"	Ключ, для получения заголовка опции в случае, если не определено getOptionLabel
getOptionValue		GetOptionValue	null	Функция получения значения опции
valueKey		string	"value"	Ключ, для получения значения опции в случае, если не определено getOptionValue
onChange		(nextValue: any) => void	"(): void => {}"	Обработчик изменения значения поля @param nextValue - новое значение поля
options	+	OptionsType	GroupedOptionsType

SelectAjax

Стилизованный react-select-fetch.

import { SelectAjax } from '@n3/kit/SelectAjax';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
small		boolean	false	Маленькое ли поле
isMulti		boolean	false	Множественный выбор
isClearable		boolean	true	Возможность сброса значения
hasError		boolean	false	Есть ли у поля ошибка
hasWarning		boolean	false	Есть ли у поля предупреждение
value		any	null	Значение поля
selectRef		Ref		ref для получения экземпляра react-select
renderModal		`(renderProps: ModalSelectButtonModalRenderProps<ValueType>) => ReactNode`	undefined	Функция рендера содержимого модального окна
isDisabled		boolean	false	Выключено ли поле
getOptionLabel		GetOptionLabel	null	Функция получения заголовка опции для вывода и фильтрации
labelKey		string	"label"	Ключ, для получения заголовка опции в случае, если не определено getOptionLabel
getOptionValue		GetOptionValue	null	Функция получения значения опции
valueKey		string	"value"	Ключ, для получения значения опции в случае, если не определено getOptionValue
onChange		(nextValue: any) => void	"(): void => {}"	Обработчик изменения значения поля @param nextValue - новое значение поля
url	+	string		апи-url для запроса данных
queryParams		{ [key: string]: any; }		Перманентные параметры запроса
searchParamName		string		Ключ, по которому текст строки поиска будет добавлен к параметрам запроса
pageParamName		string		Ключ, по которому номер текущей страницы будет добавлен к параметрам запроса
offsetParamName		string		Ключ, по которому индекс первой опции для запроса будет добавлен к параметрам запроса
mapResponse		MapResponse		Функция маппинга ответа сервера в формат react-select-async-paginate
get		Get		Асинхронная функция запроса данных с сервера @param url - апи-url @param queryParams - параметры запроса @returns ответ сервера
debounceTimeout		number		Задержка при отправке запросов
cacheUniqs	+	any[]		Список значений при изменении одного из которых опции будут сброшены

SelectAsync

Стилизованный react-select-async-paginate.

import { SelectAsync } from '@n3/kit/SelectAsync';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
small		boolean	false	Маленькое ли поле
isMulti		boolean	false	Множественный выбор
isClearable		boolean	true	Возможность сброса значения
hasError		boolean	false	Есть ли у поля ошибка
hasWarning		boolean	false	Есть ли у поля предупреждение
value		any	null	Значение поля
selectRef		Ref		ref для получения экземпляра react-select
renderModal		`(renderProps: ModalSelectButtonModalRenderProps<ValueType>) => ReactNode`	undefined	Функция рендера содержимого модального окна
isDisabled		boolean	false	Выключено ли поле
getOptionLabel		GetOptionLabel	null	Функция получения заголовка опции для вывода и фильтрации
labelKey		string	"label"	Ключ, для получения заголовка опции в случае, если не определено getOptionLabel
getOptionValue		GetOptionValue	null	Функция получения значения опции
valueKey		string	"value"	Ключ, для получения значения опции в случае, если не определено getOptionValue
onChange		(nextValue: any) => void	"(): void => {}"	Обработчик изменения значения поля @param nextValue - новое значение поля
loadOptions		LoadOptions<any, any>		Асинхронная функция запроса данных с сервера в формате react-select-async-paginate @param search - значение строки поиска @param prevOptions - список загруженных опций @param additional - дополнительные параметры запроса @returns ответ сервера
additional		any		Дополнительные параметры первого запроса
debounceTimeout		number		Задержка при отправке запросов
cacheUniqs	+	any[]		Список значений при изменении одного из которых опции будут сброшены

showConfirm

Всплывающее подтверждение.

import {
  showConfirm,
  ConfirmError,
} from '@n3/kit/showConfirm';

// ...

const result = await showConfirm({
  title: 'Таблица «Отчет 23.10.2019»',
  content: 'Вы сможете переместить таблицу обратно в любое время.',
  approveButtonText: 'Переместить',
  cancelButtonText: 'Оставить',
});

Параметры

Название	Обязательность	Тип	Значение по умолчанию	Описание
modalSize		enum - modalSizes.SMALL - modalSizes.DEFAULT	`modalSizes.SMALL`	Размер модального окна
title		string	`null`	Заголовок
content		node	`null`	Текст
approve		func	`null`	Асинхронная функция подтверждения, может закончиться с исключением ConfirmError({ title, message })
cancelButtonText	+	string		Текст кнопки отмены
approveButtonText	+	string		Текст кнопки подтвеждения
approveButtonColor		enum - buttonColors.DEFAULT - buttonColors.PRIMARY - buttonColors.TERTIARY - buttonColors.DANGER	`buttonColors.PRIMARY`	Цвет кнопки подтверждения
resolveModal	+	func

Sidebar

Сайдбар.

import { Sidebar } from '@n3/kit/Sidebar';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
menuCollapsible		boolean	true	Возможность схлопывания меню в иконки
linksGroups	+	(SidebarLinksGroup \| SidebarLink)[]		Описание пунктов
counters		{ [key: string]: number; }	"{}"	Счётчики
countersMaxNumber		number	null	Максимальное число в счётчиках
showCountersInOpenedState		boolean	false	Показывать ли счётчики у открытых групп
collapsible		boolean	true	Возможность скрытия меню на маленьких экранах
collapsed		boolean	true	Скрыто ли меню на маленьком экране
openedGroups		{ [key: string]: boolean; }	"{}"	Объект, показывающий, какие группы открыты
openedByDefault		boolean	false	Открыты ли по умолчанию группы, id которых отстуствуют в openedGroups
menuCollapsed		boolean	false	Схлопнуто ли меню в иконки
closeMenu		() => void	"(): void => {}"	Обработчик закрытия меню
setMenuCollapsed		(nextValue: boolean) => void	"(): void => {}"	Обработчик схлопывания меню в иконки @param nextValue - новое состояние схлопнутости
onToggleGroup		(groupId: string, opened: boolean) => void	"(): void => {}"	Обработчик скрытия/раскрытия пунктов меню @param groupId - id группы @param opened - новое состояние открытости/закрытости

Параметры `link`

Название	Обязательность	Тип	Значение по умолчанию	Описание
type	+	"link"
id	+	string
title	+	ReactNode		Заголовок ссылки
renderIcon		RenderSidebarIcon	null	Функция рендера иконки первого уровня
payload	+	{ url: string; target?: string; isAnchor?: boolean; }

Параметры `group`

Название	Обязательность	Тип	Значение по умолчанию	Описание
type	+	"group"
id	+	string
title	+	ReactNode		Заголовок группы
renderIcon		RenderSidebarIcon	null	Функция рендера иконки первого уровня
payload	+	{ links: (SidebarLinksGroup \| SidebarLink)[]; }

SortIndicator

Индикатор сортировки.

import { SortIndicator } from '@n3/kit/SortIndicator';

Props

Название	Тип	Значение по умолчанию	Описание
iconUpClassName	string	""	Дополнительный класс иконки "вверх"
iconDownClassName	string	""	Дополнительный класс иконки "вниз"
isActive	boolean	false	Активна ли сортировка по выбранному параметру
asc	boolean	true	По возрастанию ли сортировка

SortSwitcher

Переключатель сортировки.

import { SortSwitch } from '@n3/kit/SortSwitcher';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
activeParam		string	null	Параметр, по которому произведена сортировка
param	+	string		Текущий параметр для сортировки
asc	+	boolean		Сортировка по возрастанию
isDefaultSortAsc		boolean	true	Сортировка по умолчанию по возрастанию
setSorting	+	(paramName: string, asc: boolean) => void		Обработчик изменения параметра или порядка сортировки @param paramName - параметр сортировки @param asc - сортировка по возрастанию
children		ReactNode	null	Заголовок

Table

Компоненты для создания таблиц.

import {
  Table,
  Th,
  Td,
} from '@n3/kit/Table';

// ...

<Table>
  <thead>
    <tr>
      <Th rowSpan={2}>#</Th>
      <Th colSpan={2}>Name of person</Th>
      <Th rowSpan={2}>Username</Th>
    </tr>

    <tr>
      <Th>First Name</Th>
      <Th>Last Name</Th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <Td>1</Td>
      <Td>Mark</Td>
      <Td>Otto</Td>
      <Td>@mdo</Td>
    </tr>

    <tr>
      <Td>2</Td>
      <Td>Jacob</Td>
      <Td>Thornton</Td>
      <Td>@fat</Td>
    </tr>

    <tr>
      <Td>3</Td>
      <Td colSpan="2">Larry the Bird</Td>
      <Td>@twitter</Td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <Td>#</Td>
      <Td>First Name</Td>
      <Td>Last Name</Td>
      <Td>Username</Td>
    </tr>
  </tfoot>
</Table>

Props

Table

Название	Обязательность	Тип	Значение по умолчанию	Описание
lightenRow		number	`null`	Номер строки, для которой применена подсветка

Th/Td

Название	Тип	Значение по умолчанию	Описание
className	string	`''`
isMinWidth	bool	`false`	Добавить width: 1px для рендера узких колонок (иконкий действий и т.п.)
isNowrap	bool	`false`	Добавить white-space: nowrap
hasWordBreak	bool	`false`	Добавить свойства для разбиения строк в случае переполнения
textAlign	enum - 'left' - 'right' - 'center'	`'left'`
width	union - string - number	`null`

TableActions

Компонент действий со строками таблицы.

import { TableActions } from '@n3/kit/TableActions';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
actions	+	arrayOf [ shape { - render func - disabled bool - label string - onClick func - renderIcon func } ]		Список действий

Tabs

Табы.

import { Tabs } from '@n3/kit/Tabs';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
tabs	+	arrayOf [ shape { - id union - number - string - title node - renderIcon func } ]		Массив табов для рендера
current		union - number - string	`null`	id выбранного таба
recountOnResize		bool	`false`	Пересчитывать ли состояние скрытий/показа табов при изменении размеров окна
renderTab		func	`undefined`	Функция рендера таба @param {Object} renderProps @param {string} renderProps.className @param {Function} renderProps.onClick @param {ReactNode} renderProps.label - заголовок таба @param {Object} renderProps.tab - объект таба
setCurrentTab		func	`undefined`	Обработчик изменения текущего таба @param {string
renderContent		func	`(contentNode) => contentNode`	Функция рендера табов для возможности создания обёртки

Tag

Тег.

import { Tag } from '@n3/kit/Tag';

Props

Название	Тип	Значение по умолчанию	Описание
preset	TagPresetType	`'light_gray'`	Цвет тега
textColor	string	`undefined`	Переопределённый цвет текста (только в случае, есле цветов из `preset` недостаточно)
backgrondColor	string	`undefined`	Переопределённый цвет фона (только в случае, есле цветов из `preset` недостаточно)
borderColor	string	`undefined`	Переопределённый цвет границы (только в случае, есле цветов из `preset` недостаточно)
component	TagComponent	`'span'`	Компонент тега
className	string	`''`	Дополнительный класс тега
size	TagSize	`'medium'`	Размер (работает только в стандартном стиле)
variant	TagVariant	`'default'`	Стиль отображения тега

Toggle

import { Toggle } from '@n3/kit/Tag';

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
checked	+	`boolean`		выбран ли данный toggle
disabled		`boolean`	`false`	Выключено ли поле
name		`string`	`''`	name html-элемента input, а также аргумент колбэка onChange
value		`ToggleValue`	`''`	value html-элемента input, а также аргумент колбэка onChange
label		`ReactNode`	`''`	текст/контент, выводящийся рядом
small		`boolean`	`false`	Маленький ли toggle
className		`string`	`''`	Дополнительный класс корневого компонента
inputProps		`Omit<HTMLProps, 'ref'	'as'>`	`undefined`
onChange		`OnToggleChange`	`undefined`	хэндлер изменения значения, вызывается с параметрами: (nextChecked, value, name)

Компонент для создания всплывающих подсказок.

import { Tooltip } from '@n3/kit/Tooltip';

// ...

<Tooltip
  tooltip="Подсказка"
>
  {({
    innerProps,
    ref,
  }) => (
    <span
      {...innerProps}
      ref={ref}
    >
      Наведите, чтобы увидеть подсказку
    </span>
  )}
</Tooltip>

Props

Название	Обязательность	Тип	Значение по умолчанию	Описание
tooltip	+	node		Контент тултипа
placement		string	`'bottom'`	Расположение popper-компонента
popperStyle		objectOf { any }	`{}`	Дополнительные стили popper-компонента
popperProps		objectOf { any }	`{}`	Дополнительные опции popper-компонента
children	+	func		Функция рендера тултипа @param {Object} renderProps @param {Object} renderProps.ref - ref dom-элемента, открывающего тултип @param {Object} renderProps.innerProps - props, которые должны переданы dom-элементу, открывающему тултип @param {boolean} renderProps.isOpen - открыт ли тултип

Typography

import { Typography } from '@n3/kit/Typography';

// ...

<Typography
  variant="h3"
  align="center"
>
  Текст
</Typography>

Props

Название	Тип	Значение по умолчанию	Описание
className	`string`	`''`	Дополнительный класс
variant	`TypographyVariantType`	`'body01'`	Вариант текста
align	`string`	`'inherit'`	Выравнивание в блоке
color	`string`	`undefined`	Цвет текста
component	`ComponentType<any>`	`undefined`	Компонент
children	`TypographyVariantType`	`undefined`
...rest	`Record<string, unknown>``		Дополнительные props компонента

useLayoutState

Хук для получения состояния Layout (возвращает null, если Layout не используется).

import { useLayoutState } from '@n3/kit/Layout';

useRemoveButton

Хук для создания кастомной кнопки удаления.

import type {
  ReactElement,
  ReactNode,
} from 'react';

import {
  useRemoveButton,
} from '@n3/kit/useRemoveButton';
import type {
  UseRemoveButtonParams,
} from '@n3/kit/useRemoveButton';

type CustomRemoveButtonProps = UseRemoveButtonParams & {
  children?: ReactNode;
};

function CustomRemoveButton(props: CustomRemoveButtonProps): ReactElement {
  const {
    children,
    remove,
    onRemoveSuccess,
    approveTitle,
    approveContent,
    approveButtonText,
    approveButtonColor,
    cancelButtonText,
    errorsPath,
    redirectTo,
    notification,
  } = props;

  const {
    isRemoving,
    onClick,
  } = useRemoveButton({
    remove,
    onRemoveSuccess,
    approveTitle,
    approveContent,
    approveButtonText,
    approveButtonColor,
    cancelButtonText,
    errorsPath,
    redirectTo,
    notification,
  });

  return (
    <button
      type="button"
      disabled={isRemoving}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

Keywords

FAQs

What is @n3/kit?

Is @n3/kit popular?

Is @n3/kit well maintained?

Package last updated on 28 May 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install