Я думаю, что многие задумывались при создании новых и новых проектов о том, что компоненты между ними имеют одну и ту же логику, которую зачастую не так-то и быстро можно написать с нуля.
И мы встаём перед выбором: или копировать то, что уже было создано ранее или воспользоваться какой-либо библиотекой. Оба варианта не могут решить проблему на 100%, так как нам из раза в раз надо будет копаться в старом коде, либо искать новую подходящую библиотеку ( если повезёт её найти ).
Нам не хватает единого источника правды, от которого можно было бы отталкиваться при создании компонентов.
Решением этой проблемы является React Spectrum от компании Adobe. Это библиотека, в которой логика для создания компонентов уже написана за вас. Вам необходимо только импортировать её к себе в проект и добавить кастомных стилей.
Выглядит это следующим образом:
Заходим в документацию
Находим нужный нам компонент ( как в примере с выпадающим меню )
Схематичное отображение компонента в React Aria Дублируем код, описанный в документации
Код для компонента из React Aria Добавляем свои стили, логику и прочее
Удивляемся как просто можно создавать компоненты со сложной логикой
Структура библиотеки
Выше я специально кратко описал как устроена библиотека, чтобы неосведомлённый мог быстро вникнуть и понять нужно ли это ему. Для тех, кто хотел бы узнать побольше, едем дальше.
Сама библиотека состоит из 4-х частей:
internationalized - набор функций и классов для работы с международными форматами данных
react-aria - хуки для нормализации доступности ( a11n ) на разных устройствах
react-spectrum - внутренние компоненты библиотеки, которые мы можем подгонять под наши цели
react-stately - хуки для работы с состоянием компонентов
Эти хуки могут быть использованы как вместе, так и по-отдельности в зависимости от нужного нам компонента. В идеале вам необходимо ознакомиться с последними тремя разделами ( ознакомиться, не зубрить ! ? ), и по мере надобности искать необходимые компоненты из списка, чтобы изучить подробнее.
А с пакетом internationalized думаю и так всё должно быть понятно. Если вашим сайтом пользуются люди из разных стран, то можно подумать о его включении его в проект, в противном случае нет.
Также существует отдельный раздел Spectrum Ecosystem. В нём содержится дизайн правила компании Adobe и сам CSS код, поэтому если хотите воспользоваться их UI kit'ом, то переходите смело по ссылке и читайте подробнее.
А пример можно ?
Пример часто бывает уместен для описания кода, но в нашей ситуации он только отнимет ваше драгоценное время, так как документация и так написана очень хорошо, поэтому дерзайте!
А что насчёт альтернатив ? ( update 04.03.2023 )
Спасибо всем, кто писал в комментариях о том, что существуют и другие библиотеки для решения подобной проблемы. Если будут предложения ещё, пишите - буду рад сделать эту статью ещё более информативной !
Итак, перейдём к списку:
Radix UI - [ Acessibility, большой набор компонентов ]
Headless UI - [ Acessibility, небольшой набор компонентов ]
Reakit - [ Acessibility, небольшой набор компонентов ]
Ariakit - [ Accessibility, большой набор компонентов ]
Restart UI - [ Accessibility, небольшой набор компонентов ]
Выше я привёл пример полностью кастомизируемых библиотек с компонентами. Вы можете придать им любой вид при помощи CSS. Они также называются Headless UI libraries ( библиотеки безголового интерфейса ) из-за их особой гибкости.
Также помимо них существуют и такие, в которых стили для компонентов были написаны за Вас. К таким можно отнести:
Они не подойдут для ситуаций, когда нужна полностью собственная дизайн система, но когда это не так важно, Вы можете делать обёртки над ними и использовать собственные стили. Это подойдёт для тех ситуаций, когда Вы хотите немного изменить внешний вид готовых компонентов ( уменьшить отступ, сменить цвет и т.д. ), т.к. замена старых стилей новыми это достаточно ресурсоёмкий процесс.
