Поделитесь вашими любимыми библиотеками или теми, с помощью которых удалось решить необычную проблему. Следует указать название библиотеки и краткое её описание и/или проблему, которую она помогла решить.
- UI-библиотеки
- UI-компоненты
- Логические компоненты
- Анимации
- Web3
- Мультиязычность
- Wysiwyg
- Документация
-
radix-ui/primitives - библиотека с большим количеством полностью самостоятельных компонентов. Каждый компонент ставится как отдельная зависимость, без необходимости устанавливать всю UI библиотеку целиком. Удобная, хорошо настраиваемая, легко кастомизируемая. Многие компоненты этой библиотеки стали основой для других UI систем.
-
Material UI - самая популярная UI библиотека для React. Большое количество компонентов, кастомизация покрывающая большую часть кейсов. Интеграция с популярными CSS-решениями (CSS modules, css-in-js, tailwind, др.). Под капотом решены большое количество пограничных кейсов, о которых вы даже могли не знать. Например дизейбл скролла при появлении модалки и добавления паддинга на место, где находится скролл, чтобы избежать скачков ширины контента.
Недостатки: громоздкость, большое API, в котором порой тяжело найти то, что нужно. Навороченное стилевое оформление из коробки, которое приходится переопределять при наличии дизайна на проекте (хотя можно использовать безстилевые варианты компонент).
-
@headlessui/react - набор базовых ui-компонентов. Легко кастомизируется за счет композабельности, минималистичного API и отсутствия лишней стилизации. Так же из коробки имеет все преимущества для a11y. Есть своя реализация транзишна перед дестроем компонента (Transition-компонент). Минусы - небольшое количество компонентов.
- react-content-loader - красивый запасной интерфейс, пока загружаются данные. Простая библиотека построенная на SVG.
-
@rehokify/datepicker - набор декларативных хуков для создания дейтпикеров для тех, кому надоело переопределять дефолтные стили и разметку у компонентов, предоставляемых ui-kit'ми. Из минусов - библиотека относительно молодая, маленькое комьюнити. Из-за этого может быть много неотловленных эдж-кейсов.
-
react-date-picker - обычный календарь. Плюсы: интегрирован с React, есть всё необходимое API. Минусы: откровенно так себе начальный внешний вид, который придётся переопределять.
- react-phone-number-input - прекрасная библиотека для ввода номера телефона, с кастомизацией, автоформатированием, валидацией, визуальным отображением и автоопределением страны. Так же есть полезные утилиты для валидации.
- react-number-format - библиотека с разнообразным числовым форматированием (цены, номер телефона, числовые значения.)
-
noUiSlider - библиотека для range-slider на чистом JS и без зависимостей. Из плюсов можно отметить полноту документации и большое API, которое может покрыть специфические кейсы. Пример использования с React здесь.
P.S. В целом как буд-то выбор не велик, если ищите готовое решение для range-slider. Практически все библиотеки либо мертворождённые, либо сильно недоработанные и со слабым API. Нормальных реакт библиотек я вообще не встретил. А ещё многие библиотеки написаны на jQuery, который точно не хочется тянуть. Если знаете альтернативу, ждём предложений.
- react-tooltip - реакт-библиотека для всплывающих подсказок при наведении.
- react-countdown - безстилевой реакт-компонент для отображения обратного отсчёта. Пример.. Внешний вид настраивается прокидыванием собственного JSX-кода.
- sonner - простая библиотека для всплывающих уведомлений с хорошей кастомизацией.
- react-toastify - библиотека с расширенным функционалом и более красивым внешним видом из коробки.
- react-dropzone - библиотека для перетаскивания файлов в определённую область с очень простым API.
Библиотеки для перетаскивания элементов интерфейса
- react-player - библиотека , которая позволяет вставлять видео на сайт из множества разных источников - YouTube, Facebook, SoundCloud, Twitch, файлы mp4, webm, HLS и много других. Ей достаточно просто передать url, а либа сама его распарсит, скачает нужный SDK, а так же предоставит унифицированный API для работы с любым видео ресурсом. Интерактивное демо тут.
- react-fast-marquee - простой компонент бегущей строки с парой встроенных фич (пауза при ховере или при клике) и кастомизацией
- react-use-draggable-scroll - Маленький хук, активирующий перетаскивание внутри контейнера. Горизонтальное, вертикальное или в обоих направлениях сразу. Работает на десктопах и мобилках. Реализован через прослушивание событий. Есть опция, позволяющая управлять количеством пикселей, через которое движение мышью будет считаться перетаскиванием, а не кликом. Демо можно посмотреть здесь.
- motion - отличная библиотека для создания анимаций простого и среднего уровней. Простой API, декларативный подход и низкий порог входа. Нейронки так же отлично справляются с созданием анимаций используя motion. Библиотека может использовать Web Animations API, который открывает доступ к аппаратному ускорению. Другими словами, ваши анимации рендерятся в отдельном JS потоке, не блокируя основной поток и воспроизводятся без "тормозов", когда основной поток сильно загружен.
- gsap - позволяет делать анимации любого уровня сложности. С недавних пор полностью бесплатная. Тяжелее и сложнее, чем motion, использует императивный подход, но позволяет делать очень красивые вещи. Имеет несколько встроенных плагинов, напр. можно анимировать скролл и листать страницу по секциям.
- wagmi - библиотека для работы с evm-сетями на React, на данный момент является стандартом при работе с evm-сетями. Большое количество готовых хуков, поддержка мультичейн. Под капотом использует viem - современный, модульный и строго типизированный аналог ethers.js. А так же tanstack/query, который даёт все свои преимущества при работе с асинхронностью (кэш, дедупликация и пр.). Есть несколько готовых интеграций для подключения крипто кошельков. Так же есть wagmi/core - всё тот же функционал из хуков, но в императивном подходе.
- react-i18next - библиотека для добавления мультиязычности в ваше React приложение.
- next-intl - интернационализация в проектах Next.js.
- remirror - библиотека для конструирования wysiwyg редакторов любой разновидности и сложности. Имеет очень гибкое API с возможностью добавления расширений (есть как builtin-решения, так и возможность сделать свой кастомный вариант).
- nextra - фреймворк для генерации сайтов (в том числе документаций) на основе markdown (MDX) и Next.js.
- docusaurus - похожий инструмент на nextra, но без Next.js.