react-stack-layout

Библиотека для быстрого расположения контролов в вертикальный или горизонтальный стэки. По сути представляет собой layout manager из мира Desktop приложений.

Обоснование

Очень часто при разработке бизнес логики нужно быстро выстроить контролы горизонтально друг за другом, вырывания их, например, по базовой линии, не забывая при этом, что между ними должно быть небольшое расстояние. Верстая такую логику много раз, появляется дублирование верстки.

В этой библиотеке я обобщил самые частые сценарии расположения контролов и создал несколько удобных абстракций построенных поверх flexbox.

Плюс ещё маленький бонус: такой код понятен любому.

Идея

Предположим, требуется расположить несколько контролов определённым образом. Вместо того, чтобы делать добавочные стили к элементам, предлагается создать шаблон (или каркас) с placeholder-ами, внутри которых разместить нужные элементы.

Что имеем?

Корневые элементы

• RowStack — располагает дочерние элементы в строку.
• ColumnStack — располагает дочерние элементы колонкой, друг под другом.

Placeholder-ы

• Fit — принимает размер, соотвествующий своему контенту.
• Fill — занимает всю доступную область.
• Fixed — имеет фиксированный размер.

Как использовать

Установка

npm install @skbkontur/react-stack-layout

или

yarn add @skbkontur/react-stack-layout

и подключаем

import { ColumnStack, RowStack, Fill, Fit, Fixed } from "@skbkontur/react-stack-layout";

Документация

• Как использовать
• Сценарии использования
• Известные недостатки
• API Reference

Поиграть на CodeSandbox