admin 13 октября 2018

ТОП-9 библиотек для стилизации React UI через Styled-Components

Хотите создать необычный UI для React-приложения? Наша редакция подготовила ряд Styled-Components библиотек, которые помогут в преображении.


В React-сообществе набирают обороты дискуссии на тему стилизации компонентов пользовательского интерфейса. Рост интереса к CSS in JS связан с ростом популярности экосистемы React. Приступим к рассмотрению полезных библиотек, использующих styled-components для обеспечения аккуратного готового UI из коробки.

Rebass

Rebass

Либа набрала 5 000 звезд. Это легкий и красиво оформленный набор из 8 расширяемых и совместимых компонентов, созданных с учетом отзывчивости и возможностью полной кастомизации (есть встроенные темы).

Официальный мануал и учетка в GitHub.

Компоненты Zendesk’s Garden

zendesk’s-garden

Хотя у данного ПО только 350 звезд, оно предоставляет хорошо продуманные компоненты, которые доступны как в NPM, так и на Git для совместного использования. Компоненты созданы для работы с целым рядом пользовательских девайсов, могут работать с right-to-left макетами, а некоторые даже содержат анимацию. Небольшие фрагменты HTML, CSS и JavaScript уже подготовлены для импорта в любое приложение на React.

Учетка в GitHub.

Atlaskit

Atlaskit

Библиотека компонентов Atlassian UI, реализует рекомендации по проектированию Atlassian и использует styled-components как базовый инструмент. Библиотека была запущена для реализации всех облачных продуктов Atlassian, построенных на React. Каждый компонент представлен в виде отдельного пакета.

Учетка проекта в GitHub.

Grommet V2

Grommet

Новую версию замечательной библиотеки Grommet уже используют Netflix и Uber. Она заменяет SASS styled-components. Так, больше не нужны специальные конфигурации или использование SASS для изменения ваших компонентов. Стиль не является глобальным, а активация темы больше не происходит во время сборки.

Официальный мануал и учетка в GitHub.

Smooth-UI

Smooth-UI

Пример работы Smooth-UI

Библиотека UI компонентов набрала 800 звезд. В комплекте предоставляются некоторые классы, поэтому изучать новый API для расширения компонентов вам не придется – можно использовать компоненты и классы из коробки.

Учетка проекта в GitHub.

Reactackle

Reactackle

Двухсотзвездочный reactackle – это кроссбраузерная библиотека со styled-components. Библиотека позволяет настраивать базовый дизайн и предоставляет готовые темы.

Учетка проекта в GitHub.

Reakit

Reakit

Пример работы reakit

Reakit имеет 1 000+ звезд. Данная либа позволяет использовать любой компонент или контейнер для создания чего-то нового. Все компоненты WAI-ARIA совместимы, а также построены в соответствии с Single Element Pattern, что делает их похожими на HTML элементы.

Учетка проекта в GitHub.

CSS прогресс-бар

css-progress-bar

Это коллекция компонентов загрузки на CSS для React. За основу был взят популярный проект css-loaders и переделан с использованием styled-components.

Учетка проекта в GitHub.

Styled-Components иконки

Styled-Components icons

Проект предлагает Font Awesome, Feather, Material Design и Octicons икон-паки в стиле styled-components, с полной поддержкой TypeScript и ES модулей.

Учетка проекта в GitHub.

Дополнительно

Приведем еще несколько проектов, которые уже не поддерживаются или в процессе разработки, но требуют отдельного внимания.

  • Awesome styled components – большая коллекция ресурсов с styled-components.
  • React adminlte dash – React.js компоненты для админки.
  • Styled bootstrap – Bootstrap 4 компоненты для React.
  • Buttercup – компоненты React UI, используемые в продуктах.
  • Coderbox atoms – еще одна коллекция styled-компонентов.
  • Joyent portal – коллекция элементов для Joyent и Triton.
  • Hackclub – компоненты для ускорения проектирования и разработки.
  • Rendition – библиотека UI компонентов.

Оригинал

Другие материалы по теме:

МЕРОПРИЯТИЯ

Комментарии

ВАКАНСИИ

Добавить вакансию
Разработчик C++
Москва, по итогам собеседования

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ