Библиотека UI компонентов для (HTML/CSS/JS) + ReactJS?
Порекомендуйте библиотеки ui компонентов, которые единовременно:
- Имеют версию html, css, js (без react).
- Имеют версию под react.
Идеально (но не обязательно), если бы имелась unstyled версия компонентов (не стилизованные, только функционал).
На данный момент, у меня варианты следующие:
- Взять версию без react, затем расширить ее под react. Но это накладные расходы на написание и поддержку "расширенной" версии. Зато, при прототипирование дизайна (напр. в фигме) - будет единый дизайн компонентов из коробки для обоих задач.
- Использовать 2 различные библиотеки компонентов, одна без react, вторая с react. Но это будут разные библиотеки, со своими особенностями и иногда, отсутствующими компонентами + 2 версии дизайна компонентов при прототипирование (напр. в фигме).
Склоняются ко второму варианту...
Теги вопроса: выставил html, css, js и react, т.к. вопрос относится ко всем разом. Если оставить только html, css, js, то вероятно, не будет затрагивать людей, которые использую UI компоненты под react, и наоборот.
Частично, да, чтобы как минимум их вместо меня поддерживали в будущем (сами разрабы этой библиотеки). Различные "крупные" блоки на сайте (шапки, карточки товаров, подвалы итп) в любом случае писать отдельно.
Получается такая матрешка, где 2 группы компонентов с "базой" в фигме (react/no-react), более-менее похожих друга на друга, и полностью похожие другие "крупные" компоненты.
Михаил Р., погуглив я понял почему ты задал этот вопрос.) Очень круто, когда ты гуглишь юи библиотеки для жса, а тебя осыпают списками библиотек для фреймворков.
Впрочем, нашёл такой вариант: https://shoelace.style/
Для ванилы и работает с фреймворками. Только там явно надо будет добавить файл с реэкспортами всего, что есть в библиотеке, потому что там, по ходу, все экспорты компонентов дефолтные. Плюс там свои хтмл теги, не знаю насколько это удобно.
На первый взгляд неплохо, но затем я увидел кастомные теги, да и это не на этапе сборки, а вообще они такими будут в "продакшене", и варианта принудительно использовать классику - нет. Прям вижу, как я пытаюсь объяснить заказчику/работодателю и seo роботу, что "все будет норм пацаны"...
Михаил Р., да, но внутри кастомных тегов идут нативные, так что не факт, что это проблема. Тут скорее нюанс в том, что все эти компоненты подгружаются жсом, только я не очень понял когда именно, потому что скррипт подключается в самом начале и потом вешается обсервер на документ. Я такое никогда не трогал, поэтому хз как это скажется на поисковиках, но их сайт сам на нём написан и в поисковиках виден, так что хз.
Михаил Р., потому что это редко нужно потребителю. В проекте либо есть Реакт (vue/angular/...), либо нет. Если есть - проекту не нужен набор компонентов, не адаптированных под него. Если нет - проекту не нужны React компоненты, он их даже собрать не сможет
Поэтому библиотеки обычно и разделяют на ядро и фреймворк-ориентированные обёртки
Как и предполагалось, не удалось найти "серебряную пулю", соответственно, для обоих были выбраны разные инструменты, исходят из факта популярности, количества готовых компонентов и наборов в фигме: https://getbootstrap.com/ https://mantine.dev/
Средний
