JavaScript

Я провёл исследование и сделал обзор на 12 библиотек и компонентов для React (без рейтинга). Часть из них автономные, а некоторые входят в состав более крупных библиотек, но все они делают свою работу.

Обратите внимание, что этот обзор не о Data Grid системах (Griddle и подобное), а о сетках для UI. «Правильная» сетка ― позволит вам быстрее приступить к разработке приложения и сэкономить драгоценное время.

1. React grid layout

Эта grid-система получила оценку 8 тыс. звёзд. Она поддерживает адаптивный breakpoint, перетаскивание и изменение размера элементов. Адаптивность и breakpoint могут быть заданы или сгенерированы автоматически. Систему можно использовать в server-rendered приложениях, она поддерживает перетаскивание виджетов и изменение их размеров, с настраиваемой компоновкой (горизонтально, вертикально, off). Можно удалять виджеты, не перестраивая сетку. Демо.

ссылка на проект

2. React Flexbox grid

Эта библиотека (2.5 тыс. звёзд) представляет собой набор компонентов React, которые используют flexboxgrid.css. Она поддерживает CSS модули с возможностью дополнительной настройки. Адаптивные модификаторы позволяют назначать столбцам различные размеры, офсеты, выравнивание и распределение по ширине (xs, sm, md и lg). Размеры столбцов и строк задаются в процентном соотношении, что делает макет гибким. Вы можете добавлять классы для выравнивания элементов: по началу или концу строки, а также по центру, верхней или нижней границе столбца. Похоже на flexbox, но для React. Круто.

ссылка на проект

3. React Material-UI grid

Невероятно популярная библиотека (43 тыс. звёзд), которая позволяет использовать множество компонентов, включая Grid. Адаптивная сетка подстраивается под размер и ориентацию экрана, обеспечивая согласованность между макетами. Библиотека использует Css модуль Flexible Box, что обеспечивает гибкость. Поддерживаются два типа макетов: контейнеры и элементы.

Ширина элементов устанавливается в процентах, поэтому они всегда адаптивны и подстраиваются под родительский элемент. Для отступов между элементами используется свойство padding, также к вашим услугам пять grid breakpoints: xs, sm, md, lg, и xl. Если вы уже используете эту библиотеку, то выбор очевиден. Если нет, всё равно стоит ознакомиться.

ссылка на проект

4. Grommet grid layout

Мне очень нравится Grommet и я с нетерпением жду вторую версию. Я думаю, что это отличная библиотека с прекрасным дизайном. Если вы уже пользуетесь этой библиотекой, вероятно, вы в восторге от её Grid компонента, который позволяет создать элегантный и простой интерфейс приложения. Попробуйте протестировать на StoryBook.

ссылка на проект

5. React Bootstrap / Reactstrap grid layout

React Bootstrap (14 тыс. звёзд) — это React библиотека UI компонентов, которая основана на Bootstrap 4 и использует его стили, темы и т.д. По сути это Bootstrap на React. Компонент Grid прост в освоении и применении, он позволяет создавать полуавтоматические адаптивные макеты.с



Reactstrap (7 тыс. звёзд) — это UI библиотека с компонентами Bootstrap 4, которая позволяет вам создавать макеты наподобие Bootstrap. Обратите внимание, что у библиотеки есть зависимости, включая Bootstrap и Bootstrap CSS. Неплохой вариант.

ссылка на проект

6. Autoresponsive React

Автоматическая адаптивная React библиотека (есть также react-native и vue версии). Хоть она не слишком популярна (~350 загрузок в неделю, 1 тыс. звёзд), но просто и элегантно выполняет свою работу. Вместо тысячи слов, взгляните на пример кода и демку.

ссылка на проект

7. React stack grid

Библиотека с компонентами для React.js, которая позволяет создавать макеты наподобие Pinterest, и имеет API схожий с react-stonecutter. Также не обрела большой популярности: 450 звёзд на GitHub и 3.5 тыс загрузок в неделю через NPM. Предлагает неплохой выбор фич, анимаций и условий. Можно попробовать онлайн-демо.

ссылка на проект

8. Hedron

Библиотека Hedron предлагает вам адаптивную grid-систему без излишеств, она работает на styled-components. Можно добавить любое количество breakpoints, что позволяет изменять любое свойство. Hedron имеет визуальный режим отладки для быстрого исправления ошибок.

ссылка на проект

9. React grid system

Выглядит знакомо?

Так же Bootstrap-подобная grid-система, но менее узнаваемая. Для создания адаптивных сеток предусмотрены три компонента: ContainerRowCol. Тем не менее, react-grid-system — это чистый React, в ней нет CSS (!) или имён классов. Кроме того, вы получаете различные мощные фичи, такие как настройка breakpoints и ширины отступа через контекст React.

ссылка на проект

10. Rebass React grid

Grid-система для React от команды Rebass, построенная на styled-system, с поддержкой styled-components и emotion (ранее называлась grid-styled), набрала 1.8 тыс. звёзд. Все компоненты @rebass/grid используют styled-system для свойств стиля. Значения выбираются из темы. Адаптивные стили могут передаваться как значения массива. Неплохой вариант, если вам нравится CSS-in-JS.

ссылка на проект

11. Semantic-UI React grid

Это популярная (8.5 тыс. звёзд) UI библиотека, которая предлагает вам множество полезных компонентов, основанных на принципах естественного языка. Вы можете создавать React Grid макеты, которые позволяют разделить интерфейс на строки и ячейки, которым можно давать семантические имена. Вам доступно множество настроек для создания макетов, и возможностей изменять внешний вид отдельных элементов для определённых устройств.

ссылка на проект

12. Reflexbox

Эта библиотека собрала 1.2 тыс. звёзд (2.5 тыс. загрузок в неделю) и, хотя её нельзя назвать новой, она заслуживает упоминания. Библиотека позволяет создавать flexbox макеты на React, к тому же это ещё и grid-система с довольно простым API, такой подход позволяет применять её к разным задачам и обеспечивает «компонуемость», плюс встроенный CSS-in-JS, если он вам нравится. Рискованно использовать недоработанную библиотеку, но взглянуть на неё стоит.

ссылка на проект

Перевод статьи Jonathan Saring12 React UI Layout Grid Components and Libraries for 2019