Я думаю, что многие задумывались при создании новых и новых проектов о том, что компоненты между ними имеют одну и ту же логику, которую зачастую не так-то и быстро можно написать с нуля.
И мы встаём перед выбором: или копировать то, что уже было создано ранее или воспользоваться какой-либо библиотекой. Оба варианта не могут решить проблему на 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 ( библиотеки безголового интерфейса ) из-за их особой гибкости.
Также помимо них существуют и такие, в которых стили для компонентов были написаны за Вас. К таким можно отнести:
Они не подойдут для ситуаций, когда нужна полностью собственная дизайн система, но когда это не так важно, Вы можете делать обёртки над ними и использовать собственные стили. Это подойдёт для тех ситуаций, когда Вы хотите немного изменить внешний вид готовых компонентов ( уменьшить отступ, сменить цвет и т.д. ), т.к. замена старых стилей новыми это достаточно ресурсоёмкий процесс.
Комментарии (17)
asnow
00.00.0000 00:00+1Mui? Ant? Bootstrap?
Viktor9354 Автор
00.00.0000 00:00Добрый вечер @asnow !
React Spectrum в отличие от Material UI, Ant Design и Bootstrap позволяет Вам навесить собственные стили на компоненты, вместо того чтобы довольствоваться только стандартными.
k0rinf
00.00.0000 00:00А в чем проблема переопределения стилей? Я ведь могу условно обернуть Bootstrap компонент в какой то .class-wrapper и переопределить все что внутри него через условный .class-wrapper .btn ? Более того эти библиотеки ведь дают как то настраивать тему.
Viktor9354 Автор
00.00.0000 00:00Добрый вечер, @k0rinf!
Вы правы, я допустил неточность. Ниже в комментарии описал свой довод.
xEpozZ
00.00.0000 00:00В каком таком отличии от mui эта библиотека позволяет навестить собственные стили?
Mui очень сильная по функционалу переопределения и расширения функционала библиотека. Она позволяет как изменить дефолтные стили компонентов, так и добавить свои собственные "пресеты" (варианты), так и полностью или динамически изменить весь компонент.
Стоит изучить ее возможности.
Viktor9354 Автор
00.00.0000 00:00+1Добрый вечер, @xEpozZ !
Да, действительно, в этих библиотеках можно переопределить стандартные стили. Извиняюсь за допущенную мною неточность.
Но это скорее необходимо тогда, когда Вам подходит дизайн-система библиотеки, но необходимо доровнять какой-то мелкий момент ( цвет, закругление, шрифт ). В случае, когда у Вас собственный дизайн, использование этой библиотеки будет нерациональным решением с точки зрения времени, так как на отключение старых и подключение новых стилей уйдёт гораздо больше времени, нежели просто на создание новых. Да и код станет менее разборчивым и излишне подробным после всех этих переопределений.
w13vitaliy
00.00.0000 00:00+1Нельзя не упомянуть про похожие библиотеки radix-ui/primitives, handless-ui
Viktor9354 Автор
00.00.0000 00:00+1Добрый день, @w13vitaliy!
Спасибо за полезное дополнение ! Чуть позже добавлю в статью.
taujavarob
00.00.0000 00:00"Это библиотека, в которой логика для создания компонентов уже написана за вас....
4 Добавляем свои стили, логику и прочее
5 Удивляемся как просто можно создавать компоненты со сложной логикой"
Поясните о какой логике идёт речь. Во всех этих случаях?
Так нам надо добавлять свою логику куда-то или нет?
В приведённом вами примеров я вообще не нашёл никакой логики в компоненте из этой библиотеки. Не заметил? Или я что-то не понимаю?
Viktor9354 Автор
00.00.0000 00:00Добрый день, @taujavarob !
Под "логикой" во всех этих описаниях имеется ввиду часть, которая написана на JS ( React )
Или другими словами всё то, что не было создано на HTML, CSS
Пример:
Представьте себе калькулятор, написанный на HTML, CSS и JS. Он состоит из JavaScript функций, классов, необходимых для сложения, вычитания, умножения чисел. Но также за его внешний вид отвечают HTML и CSS.
Если перевести этот пример на нашу ситуацию, то получается, что библиотека уже написала за нас функции, классы калькулятора на JS, а мы можем в зависимости от проекта цеплять на них свой UI ( интерфейс ) при помощи HTML и CSS.
Viktor9354 Автор
00.00.0000 00:00Добавлять свою прослойку логики или нет - зависит от Вас и Вашего проекта. Но для того, чтобы компонент работал так, как написано в документации, достаточно перенести их функционал ввиде React-хуков к себе локально.
Viktor9354 Автор
00.00.0000 00:00В приведённом примере "логики" в виде React-хуков действительно нет, но есть компоненты ( Select и Item ), которые были написаны самой библиотекой и которые под капотом как раз таки и содержат функционал, необходимый для работы.
Подробнее вы сможете ознакомиться с устройством этого компонента по вот этой ссылке.
taujavarob
00.00.0000 00:00Спасибо. Сходил по ссылке и ознакомился.
Как я понял:
react-aria - это набор хуков, с помощью которых вы можете создать компоненты для своей собственной системы компонентов. Создать такой сложности какая вам придёт в голову.
react-spectrum - это пример создания библиотеки компонентов от Adobe на основе тех самых хуков из react-aria.
Вы можете использовать эту библиотеку компонентов сразу, - ибо там есть множество настроек, в том числе есть и class от Adobe.Интерес представлют именно хуки из react-aria - так как с их помощью можно попытаться создать новые свои(!) уже компоненты такие, какие вы только можете себе вообразить и которых нет в библиотеке компонентов react-spectrum.
Я не знаю, предоставляют ли иные библиотеки компонентов возможность не только использовать уже имеющиеся компоненты (конечно они все настраиваемые), но и возможность создавать любой сложности новые(!) компоненты на основе каких-то базовых элементов.
В данном же случае это вполне возможно на основе именно хуков(!) из react-aria.
Эти хуки возвращают props которые передаются дальше мелким элементам DOM-дерева вашего компонента. С помощью хуков (посмотрев как это делается в библиотеке компонентов react-spectrum) можно создавать такие компоненты, которых нет в библиотеке компонентов react-spectrum.Фактически react-spectrum - это одна из реализаций компонентов от Adobe.
Таких (других, ваших) реализаций может быть сколько угодно, но в основе их будут лежать мелкие элементы DOM со свойствами, полученными при вызове хуков из react-aria.
А можно просто использовать уже готовый набор компонентов из react-spectrum.
Или добавить к нему свои новые компоненты, созданные на основе хуков из react-aria.Компонентов в react-spectrum не так уж и много. Наверняка есть библиотеки компонентов где компонентов в разы больше. - Но идея дать набор неких хуков react-aria, для создания собственных(!) разнообразных компонентов, конечно интересная.
obabichev
Нельзя называть библиотеку компонентов библиотекой компонентов, если ты хочешь продать библиотеку компонентов...
Viktor9354 Автор
Добрый вечер, @obabichev !
Не совсем понял, что Вы имели ввиду. Целью этого поста было показать, что есть способ писать компоненты гораздо проще и быстрее.
Lex100500proxy
Не обращай внимания. Просто человек иронизирует.