# @n3/react-page-blocks

> Page blocks (header and sidebar) for react applications based on @n3/kit

Latest version **0.2.1** (published 2021-02-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install @n3/react-page-blocks
pnpm add @n3/react-page-blocks
yarn add @n3/react-page-blocks
bun add @n3/react-page-blocks
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2021-02-04 |
| First published | 2020-06-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 160.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Vadim Taits |
| Maintainers | v.voloshin, n3admin, vtaits, k.kulik, a_sannikov |

## Links

- npm: https://www.npmjs.com/package/@n3/react-page-blocks
- Repository: git@gitlab.develop.netrika.ru:web/n3components
- npm.io page: https://npm.io/package/@n3/react-page-blocks

## Dependencies (9)

- [@n3/css-base](https://npm.io/package/@n3/css-base.md) ^0.1.0
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.12.1
- [@n3/react-grid](https://npm.io/package/@n3/react-grid.md) ^0.2.0
- [@n3/react-counter](https://npm.io/package/@n3/react-counter.md) ^0.2.0
- [styled-components](https://npm.io/package/styled-components.md) ^5.2.0
- [use-onclickoutside](https://npm.io/package/use-onclickoutside.md) ^0.3.1
- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) ^0.1.14
- [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^1.2.34
- [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^5.15.2

## Recent versions

- 0.2.1 (latest) — 2021-02-04
- 0.2.0 — 2021-01-26
- 0.1.3 — 2020-10-15
- 0.1.2 — 2020-10-06
- 0.1.1 — 2020-07-14
- 0.1.0 — 2020-06-16

## README

# @n3/react-page-blocks

Шапка и сайдбар для приложений на базе `@n3/kit`.

```javascript
import {
  Header,
  Sidebar,
  Layout,
  LayoutWithoutSidebar,
  useLayoutState,
  LocalStorageLayout,
  parseLayoutFromLocalStorage,
} from '@n3/react-page-blocks';
```

* `Header` - шапка страницы
* `Sidebar` - сайдбар страницы
* `Layout` - компонент, включающий в себя шапку и сайдбар
* `LayoutWithoutSidebar` - компонент, включающий в себя шапку и `Grid`, центрирующий контент
* `LocalStorageLayout` - аналогичен `Layout`, а также хранит состояние открытости/закрытости пунктов в `localStorage`
* `useLayoutState` - хук для получения состояния `Layout` (возвращает `null`, если `Layout` не испоьзуется)
* `parseLayoutFromLocalStorage` - парсинг состояния `Layout` из `localStorage`

## Props

### Header

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

### Sidebar

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| 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 => {}" | Обработчик схлопывания меню в иконки<br>@param nextValue - новое состояние схлопнутости |
| onToggleGroup |  | (groupId: string, opened: boolean) => void | "(): void => {}" | Обработчик скрытия/раскрытия пунктов меню<br>@param groupId - id группы<br>@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)[]; } |  |  |

### Layout

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| 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) |  | Функция рендера контента<br>@param renderProps |
| onCollapseMenu |  | (nextValue: boolean) => void | "(): void => {}" | Обработчик схлопывания меню в иконки<br>@param nextValue - новое состояние схлопнутости |
| onToggleGroup |  | (groupId: string, opened: boolean) => void | "(): void => {}" | Обработчик скрытия/раскрытия пунктов меню<br>@param groupId - id группы<br>@param opened - новое состояние открытости/закрытости |

### LayoutWithoutSidebar

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

---
_Source: https://npm.io/package/@n3/react-page-blocks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._