@skbkontur/react-stack-layout

Flexbox based stack layouts for react

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@skbkontur/react-stack-layout
701.2.0a year ago4 years agoMinified + gzip package size for @skbkontur/react-stack-layout in KB

Readme

react-stack-layout npm docs
Библиотека для быстрого расположения контролов в вертикальный или горизонтальный стэки. По сути представляет собой 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";

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

Поиграть на CodeSandbox

Edit pmy55l4qrm