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