React Components

Source: https://github.com/brillout/awesome-react-components at 66b2758c4808
License: CC0-1.0
Read the English original

This edition is an AI-assisted translation.

Абсолютно потрясающий React Компоненты и библиотеки

Это список замечательных компонентов. Нет, это не полный список всех React Компонент под солнцем. Что значит “потрясающий”? Хорошо:

• Решает реальную проблему
• Он делает это уникальным, красивым или исключительным способом. (И это не очень популярно и хорошо известно… нет смысла перечислять их.)
• В последнее время code Обязательства!

Ищите . для действительно удивительных проектов. Ищите комментарии и отзывы в (italic parens) после некоторых списков заметок.

Смотрите также: Awesome React Frameworks.

Ведущие:

• @petebray, author of Fluxguard — monitor PROD website changes.
• @brillout, author of Vike — a fast Vite-based React framework that is flexible, lean, community-driven and dependable.

Вклад

Пожалуйста, просмотрите наш Вклад руководящих принциповМы сохраняем этот список свежим, требуя, чтобы все PR удалили одну или несколько непотрясающих записей из этого списка. Пожалуйста, только пиар новый ресурс, если вы также удалить один.

Таблица содержимого

• UI Компоненты
  • Редактируемая сетка данных / электронная таблица
  • Столик
  • Бесконечный свиток
  • наложение
  • Уведомление
  • Тольтеп
  • Меню
  • липкий
  • Закладки
  • погрузчик
  • Капча
  • карусель
  • Кнопки
  • крах
  • Чарт
  • Командная палитра
  • дерево
  • UI Навигация
  • Пользовательская Scrollbar
  • Аудио/видео
  • Карта
  • Время / Дата / Возраст
  • Фото / Изображение
  • Иконы
  • начинающий
  • Markdown зритель
  • холст
  • Скриншот
  • Разное
  • Форма компонентов
    • Дата/ Избиратель времени
    • Сборщик эмодзи
    • Типы ввода
    • автозаполнение
    • Выбрать
    • Цветной Пикер
    • переключаться
    • Слайдер
    • Радио кнопка
    • Выбор типа
    • Tag Input
    • Автоматизация ввода / Textarea
    • Звездный рейтинг
    • Drag and Drop
    • Сортируемый список
    • Богатый текстовый редактор
    • Markdown редактор
    • Изображение Editing
    • Коллекции компонентов Form
    • Разное
    • Синтаксис Highlight
• UI планировка
• UI анимация
  • Параллакс
• UI Рамки
  • отзывчивый
    • Material Design
  • Мобильный
  • Коллекции компонентов
• UI коммунальные услуги
  • Репортер
    • Репортер видимости
    • Измерительный репортер
  • Ввод устройства
    • Клавишные события
    • Scroll События
    • Прикосновение Swipe
    • Мышиные события
  • Мета-теги
  • Портал
  • Тест поведения пользователя
• Code Design
  • Магазин данных
  • Форма Логика
  • маршрутизатор
  • Советы от сервера
  • Связь с сервером
  • CSS Стиль
  • HTML Шаблон
  • Изоморфные приложения
  • Бойлерплант
  • Разное
• коммунальные услуги
  • i18n
  • Обязательства/интеграции
  • Интеграция со сторонними сервисами
• Выступление
  • UI
    • проверять
    • Ленивый груз
  • Размер приложения
  • Серверный рендеринг
• Инструменты Dev
  • Тест
  • Redux
  • проверять
  • Разное
• Разное
  • Статический генератор сайтов
• Облачные решения
  • Базы данных

UI Компоненты

Back to top ⬆️

Редактируемая сетка данных / электронная таблица

• AG Grid - Поддержка Advanced Data Grid / Data Table Javascript / React / AngularJS Веб-компоненты.
• fortune-sheet - Компонент электронной таблицы, который предоставляет функции вне коробки, такие как Excel.
• gigatables-react - Сортировка, pagination/infinite scroll, глобальный/column поиск, AJAX CRUD и многое другое.
• Handsontable - demo - docs - Сетка данных с электронными таблицами UI поддержка React, Angular, TypeScript и JavaScript.
• jqwidgets-react-grid - Фильтрация, Группировка, Экспорт в Excel, PDFCRUD и многое другое.
• MUI X Data grid - demo/docs Быстрая и настраиваемая сетка данных с расширенными функциями для пользователей питания и сложными вариантами использования.
• react-data-grid - Сетка, похожая на Excel.
• ReactGrid - demo/docs Добавьте поведение, подобное электронным таблицам, в ваше приложение
• revo-grid - demo/docs Мощная сетка данных для React / AngularJS / Vue / Веб-компоненты с продвинутой настройкой.
• SheetXL – A high-performance spreadsheet grid. TypeScript, ESM, Node/browser, Excel-compatible functions.
• SVAR React DataGrid - demo - docs - React DataGrid с встроенным редактированием, данными дерева, контекстным меню, виртуальной прокруткой и т. Д.

Столик

• ka-table - demo - Настраиваемый компонент таблицы с сортировкой, фильтрацией, группировкой, виртуализацией, редактированием и т.д.

• mantine-datatable - demo/docs Легкий столовый компонент для Mantine UI Приложения, с большим количеством функций

• material-table - demo/docs - Построенный на Material UI, плюс: группировка, данные деревьев, расширяемые строки, экспорт, встроенное редактирование

• mui-datatables - построенный на Material UIПоиск, стилизация, фильтрация, изменение размера / скрытие колонок, экспорт, печать, выбор / расширение строк.

• react-data-table - demo/docs - доступная, отзывчивая, тематическая, декларативно настраиваемая таблица с сортировкой, выбираемые строки, расширяемые строки, пагинация

• TanStack Table - demo Безголовый UI для создания мощных столов и дата-сетей

• react-table-library - demo - React Столовая библиотека - почти безголовая настольная библиотека - для создания лучших столов.

• rsuite-table - demo/docs - компонент таблицы, поддерживающий виртуализацию.

• DevExtreme React Grid - Высокопроизводительная сетка данных на основе плагинов для Bootstrap и Material Design.

• Smart React Grid - Быстрая и полнофункциональная сетка данных с Material Design.

• simple-table - demo - docs Легкий, быстрый и богатый. Сортировка / фильтрация, виртуализация, данные о деревьях, вложенные заголовки, прикрепленные колонки, индивидуальный стиль и т. Д.

• KendoReact Grid - Мощный компонент сетки данных с более чем 100 готовыми к использованию функциями, такими как подкачка, сортировка, экспорт в Excel и многое другое.

• Material-React-Table - Полностью представленный Material UI Использование TanStack V5 React Таблица V8, написанная с нуля TypeScript

Бесконечный свиток

• @egjs/react-infinitegrid - npm - demo Модуль, используемый для размещения элементов карты, включая контент бесконечно в соответствии с различными типами макета.
• react-lazyload - Загрузите свой компонент, изображение или что-либо еще, где производительность имеет значение.
• react-list - Универсальный бесконечный свиток React компонент.
• @af-utils/virtual - demo/docs - Делайте большие прокручиваемые списки и сетки.
• react-window - demo - React компоненты для эффективного отображения больших списков и табличных данных
• virtua - demo - Компонент виртуального списка с нулевым конфигурированием, быстрым и маленьким (~ 3kB) React, Vue и твердым.

наложение

Display overlay / modal / alert /dialog / lightbox / popup

• react-aria-modal - Полностью доступный и гибкий React Модаль, построенная по WAI-ARIA Авторская практика.
• react-modal - Модальный диалоговый компонент для React.
• @paratco/async-modal - Простой асинхронный модальный обработчик для React.
• reoverlay - demo - Недостающее решение для управления модалями.
• sweetalert2 - demo/docs - Красивый, отзывчивый, настраиваемый и доступный (WAI-ARIA) замена JavaScriptВсплывающие коробки. Нулевые зависимости.
• sweetalert2-react-content - Официальный усилитель SweetAlert2 с поддержкой React Элементы как содержание

Уведомление

Toaster / snackbar - Уведомить пользователя с помощью временного всплывающего окна

• react-notifications-component - demo - Высоко настраиваемый и простой в использовании компонент для уведомлений.
• notistack - demo - docs - Высоко настраиваемые закусочные (тосты), которые могут быть сложены друг на друга
• react-local-toast - demo - docs - показывать обратную связь, связанную с конкретным компонентом, вместо тостов по всему приложению.
• react-toast - demo - docs Минимальные тостовые уведомления.
• 🚀 react-toastify - demo - Лучше поспорить на данный момент. Крюки поддерживают. Никаких судей.
• react-confirm-lite - demo - легкий, основанный на обещаниях диалог подтверждения React со встроенным Tailwind CSS Поддержка. Он разработан так, чтобы быть простым в использовании, как reactТостификация, оставаясь полностью настраиваемой.
• reapop - А. React & Redux Система уведомлений.
• react-hot-toast - demo Курение горячие уведомления для ReactЛегкий, настраиваемый и красивый по умолчанию.
• Sonner - Компонент тоста для React.

Тольтеп

• react-tooltip - React инструментальный компонент.

Меню

Menus/sidebars

• hamburger-react - demo/docs - Анимированные значки меню гамбургера для React.
• react-burger-menu - Сайдбар вне холста с эффектами и стилями.
• react-offcanvas - Вне холста меню для React.
• react-planet - demo Создавайте круговые меню, которые выглядят как планеты.
• mantine-contextmenu - demo/docs Контекст-меню крюк/компонент для приложений, построенных с помощью Mantine UI.

липкий

Fixed headers / scroll-up headers / sticky elements

• react-headroom - Спрячьте заголовок, пока он вам не понадобится.
• react-stickynode - Исполнитель и всеобъемлющий React липкий.

Закладки

• react-tabs - React Компонент вкладок.
• react-tabtab - ReactЗакладки.

погрузчик

Loaders / spinners / progress bars — дайте пользователю знать, что что-то загружается

• react-loader-spinner - Коллекционный набор react- шпиннер для асинхронной операции.
• react-redux-loading-bar - Простой бар для погрузки Redux и React.
• react-spinners-css - Удивительная коллекция react Компоненты спиннеров.
• react-spinners - Коллекция компонентов для загрузки спиннера react.
• react-content-loader - Компонент SVG-Powered легко создает загрузку заполнителей (например, загрузку карт Facebook).

Капча

• react-simple-captcha - npm - demo - React Simple Captcha - это очень мощный, настраиваемый и простой в использовании Captcha. React Дж.
• procaptcha - demo - docs Конфиденциальность ориентирована бесплатно CAPTCHA

карусель

• @egjs/react-flicking - npm - demo - Это надежная, гибкая и расширяемая карусель.
• react-awesome-slider - demo - Полная страница, 3D анимация, 60 кадров в секунду и слайдер / карусель контента.
• pure-react-carousel - Построен с нуля и не очень самоуверенный.
• react-id-swiper - Библиотека для использования опасного швейцара ReactJs компонент
• react-instagram-zoom-slider - demo - Компонент слайдера с возможностью масштабирования, вдохновленный Instagram.
• react-responsive-carousel - React.js Responsive Carousel (совместно с Swipe)
• react-slick - React карусельной составляющей.
• keen-slider - demo - Исполнитель карусели/слайдера с native Поведение прикосновений / свайпов.
• swiper - demo - docs Самый современный бесплатный мобильный сенсорный слайдер с аппаратными ускоренными переходами и удивительным native поведение.

Кнопки

• react-awesome-button - demo 3D анимированные кнопки 60 кадров в секунду с прогрессом загрузки и действиями социального обмена.
• reactive-button - demo - docs - Красивый компонент анимированной кнопки с индикатором прогресса.

крах

• react-accessible-accordion - Доступный аккордеон для React.
• react-collapse - Компонент-обертка для коллапс-анимации с react-Движение.
• react-tabbordion - demo универсальный, семантический и CSS- только компоненты для создания аккордеонов и вкладок.

Чарт

Display data in charts /graphs / diagrams

• essential js 2 charts - Красивые и интерактивные диаграммы и графики для react.
• EazyChart - demo - docs Легко преобразовать данные в значимые диаграммы
• echarts for react - Обертка вокруг красивых Apache Echarts
• jscharting-react – React chart component offering a complete set of chart types and engaging data visualizations with JSCharting.
• react-chartist - React Компонент для Chartist.js.
• react-charty - demo Маленькие, но мощные интерактивные данные с несколькими типами диаграмм, анимацией, масштабированием, тематикой.
• react-chartjs-2 - общий react Графические компоненты с использованием Chart.js 2.0.
• react-d3-components - Компоненты D3 для React.
• react-google-charts - React- Google-карты React компонент.
• react-highcharts - React- хайчарты.
• react-sparklines - Красивые и выразительные Sparklines React компонент.
• react-timeseries-charts - Декларативные графики временных рядов.
• react-vis - Библиотека визуализации данных на основе React и d3.
• recharts - Переопределенная библиотека диаграмм, построенная React и D3.
• rumble-charts - React компоненты для построения композитных и гибких графиков.
• victory - Данные viz для React.
• semiotic - Semiotic - это структура визуализации данных для React.
• SVAR React Gantt - demo - docs - Настраиваемый интерактивный компонент диаграммы Ганта
• DevExtreme React Chart - Высокопроизводительный график на основе плагинов для Bootstrap и Material Design.
• Smart React Chart - Полная библиотека Charting.
• react-muze - React обертка для muze(бесплатная библиотека визуализации данных для создания поисковых визуализаций данных в браузере, с использованием WebAssembly)
• Flowchart React - Разработчик Flowchart & Flowchart React.js.
• react-dashboard - Изоморфные панели.

Командная палитра

• cmdk - Быстрое, составное, нестилевое командное меню для React.
• kbar - demo Быстрый, портативный и расширяемый интерфейс cmd+k.

дерево

Отображение структуры данных дерева

• json-edit-react - demo Высоконастраиваемый JSON/Object tree viewer and editor
• react-arborist - demo - Полнофункциональный вид дерева: безголовый, виртуализированный, многоразовый, drag-n-drop, навигация по клавиатуре, поиск
• react-complex-tree - demo - docs Недопустимые доступные древесные компоненты с несколькими выборками, перетаскиванием и поиском
• he-tree-react - demo - docs - Дерево, настраиваемое UI, плоские данные, данные дерева, drag-n-drop, заполнитель для капли, складной, чекбокс, виртуализированный.

UI Навигация

Ways to navigate views

• react-scroll - React компонент прокрутки.
• react-swipeable-views - А. React Компонент для связанных вкладок и плавных просмотров.

Пользовательская Scrollbar

• rc-scrollbars - demo - Настраиваемые прокруточные панели с гибкими опциями и 60FPS
• react-custom-scroll - demo - Легко настроить панель прокрутки браузера native Поведение ОС.
• react-shadow-scroll - Компонент, который настраивает изображение и вставляет тень при прокрутке.

Аудио/видео

• react-dailymotion - Компонент игрока Dailymotion React.
• react-player - А. react Компонент для воспроизведения различных URL-адресов, включая YouTube.
• react-soundplayer - Создание пользовательских плееров SoundCloud React.
• react-youtube - React.js Компонент YouTube Player.
• video-react - Веб-видеоплеер, созданный для мира HTML5 React Библиотека.
• material-ui-audio-player - Аудио плеер для material ui design.
• react-vision-camera - Компонент камеры для React Использование GetUserMedia. Мы можем использовать этот компонент для задач компьютерного зрения, таких как сканирование штрих-кода, распознавание текста и т. Д.
• react-barcode-qrcode-scanner - Баркод и QR code компонент сканера для ReactОн использует react-видение-камера для доступа к камере и Dynamsoft Barcode Reader для чтения штрих-кодов.

Карта

• google-map-react - Универсальная карта Google react компонент, позволяющий react Компоненты на карте Google.
• mapkit - Библиотека для интеграции Apple Maps с использованием MapKit JS с аннотациями, наложениями и поиском.
• pigeon-maps - demo - ReactJS Карты без внешних зависимостей.
• react-geosuggest - А. React Autosuggest для Google Maps Places API.
• react-leaflet - React Компоненты для карт Leaflet.
• react-map-gl - А. React Обертка для MapboxGL-js и наложение API.
• react-svg-map - demo Набор компонентов для отображения интерактивной карты SVG.

Время / Дата / Возраст

Display time / date / age

• react-timeago - Простой временной компонент для ReactJs.
• timeago-react - Формат даты с *** time ago Заявление. Например: «3 часа назад».
• react-google-flight-datepicker - Выбор даты полета Google реализован в ReactJS.

Фото / Изображение

Display Images / Фото

• lightGallery - demo - docs - Полнофункциональный компонент галереи Lightbox.
• react-compare-image - demo - React компонент для сравнения двух изображений с помощью слайдера.
• react-image-gallery - Адаптивная галерея изображений, карусель, слайдер изображений react компонент.
• yet-another-react-lightbox - demo - docs - React Компонент Lightbox.
• react-intense - А. React Компонент для просмотра больших изображений вблизи.
• react-photo-album - demo - docs - Отзывчивый React Фотогалерея.
• react-svg-pan-zoom - А. React компонент, который добавляет функции панорамирования и масштабирования в SVG.
• react-particle-image - demo Изображение как интерактивные частицы.
• react-imgix - Добавьте быстрые, отзывчивые изображения в виде изображения, изображения или фона!
• @frameright/react-image-display-control - Определите области зума для умных отзывчивых изображений.
• zoom-image - demo - docs - Небольшая, но мощная фреймворк-агностическая библиотека для увеличения изображения в Интернете
• react-infinite-gallery – Infinite-scroll image gallery component for React apps.

Иконы

Display icons / icon set / emojis

• iconify-react - Более 40 тысяч иконок из 50+ наборов иконок, включая все популярные иконки и эмодзи.
• react-icons - Свг react Иконки популярных пакетов иконок с использованием импорта ES6.
• react-open-doodles - Бесплатные иллюстрации как react компонентов.
• react-icomoon - с reactВы можете легко использовать иконки, которые вы выбрали или создали в icomoon.
• tabler-icons-react - Набор из более чем 450 бесплатных лицензированных MIT высококачественных значков SVG.
• Lucide - Красивый и последовательный инструментарий иконки, созданный сообществом. Проект с открытым исходным кодом и вилка Feather Icons.

начинающий

Display элемент управления для paginate

• react-paginate - А. ReactJS Компонент, создающий пагинацию.
• react-laravel-paginex - Ларавельское начало с ReactJS (настраиваемый).
• paginated - React рендер реквизит и пользовательский крюк для создания пагинации.
• react-steps - Demo - Отзывчивый React Степпер.

Markdown зритель

Display parsed Markdow source

• react-markdown - Рендер Markdown как React компонентов.

холст

Sketch ввод с использованием Canvas или SVG

• react-konva - React Конва - это JavaScript библиотека для рисования сложной холстовой графики с привязками к Konva Framework.
• react-sketch - Инструмент Sketch для React Базовые приложения, поддерживаемые FabricJS
• react-sketch-canvas - Demo Инструмент для рисования векторов Freehand React Использование SVG в качестве холста. Принимает ввод от мыши, сенсорных и графических планшетов
• react-heat-map - Легкая календарная тепловая карта react компонент, построенный на SVG, настраиваемая версия GitHubГрафик вклада.

Скриншот

• html2canvas - Делайте скриншоты любой части вашей веб-страницы, используя Javascript.

Разное

• puck - demo Самостоятельный визуальный редактор для React
• react-advanced-news-ticker - demo Гибкий и анимированный вертикальный компонент тикера новостей
• react-avatar-generator - Позволяет пользователям создавать случайные калейдоскопы для использования в качестве аватаров.
• react-awesome-query-builder - demo Создатель визуальных запросов из полей форм с экспортом SQL, MongoDB и JSON
• react-blur - React Компонент для размытых фонов.
• react-demo-tab - demo - А React Компонент легко создает демо других компонентов.
• fastcomments-react - demo - компонент FastComments для встраивания потока комментариев в реальном времени на страницу или SPA.
• react-pdf-viewer - docs - А React Компонент для просмотра PDF Документ.
• react-simple-chatbot - demo Простой компонент чат-бота для создания разговорных чатов.
• react-file-reader-input - Компонент ввода файлов для управления стилизацией и абстракцией чтения файлов.
• react-filter-control - The React компонент фильтровода для построения критериев фильтра в UI.
• react-headings - Автоматически увеличить свой HTML заголовки (h1, h2 и т. д.) для улучшения доступности и SEO, независимо от структуры компонентов, при этом вы сохраняете полный контроль над тем, что отображается.
• react-joyride - Создайте прогулки и экскурсии для своих ReactJS приложения. Теперь с отдельными подсказками!
• react-mouse-select - Demo Компонент, позволяющий выбрать DOM Элементы, перемещая мышь
• react-resizable-and-movable - Размерный и подвижный компонент для React.
• react-resizable-box - Значительный компонент для React. #reactjs.
• react-searchbox-awesome - demo - Минимальный поисковый ящик.
• react-split-pane - React компонент сплит-пан.
• react-swipe-to-delete-ios - demo Удалить элемент в списке так же, как это делает iOS.
• react-swipeable-list - demo - Конфигурируемый компонент для рендеринга списка с прокручиваемыми элементами.
• typography - Мощный инструментарий для создания сайтов с красивой типографикой.
• react-pulse-text - demo/docs Позволяет анимировать текст любого свойства другого компонента.
• captcha-image - Позволяет генерировать случайное изображение captcha с опциями.
• react-pdf - Отображение PDF в вашем React Это приложение так же легко, как если бы это были изображения.
• react-customizable-chat-bot - Demo Создайте свой собственный чат-бот, соответствующий потребностям вашего бренда, за считанные минуты.
• @restpace/schema-form - Demo Легко создавать сложные формы автоматически из схемы JSON.
• react-darkreader - А. React Крюк для добавления темного / ночного режима на ваш сайт, вдохновленный Darkreader.
• react-apple-signin-auth - Apple подписывает React Использование Apple JS SDK.
• react-mrz-scanner - А. React компонент для сканирования МРЗ по паспортам, визовым картам и т.д. Он основан на Dynamsoft Label Recognizer.

Форма компонентов

Пусть пользователь вводит данные

Дата/ Избиратель времени

Date picker / time picker / datetime picker / date range picker

• date-range-picker - demo - Календарный компонент, который поддерживает выбор даты, диапазона и диапазонов.
• react-big-calendar - Gcal/outlook — календарный компонент.
• react-datepicker - Простой и многоразовый компонент для датчика React.
• react-day-picker - Гибкий выбор даты для React.
• react-flatpickr - Флатпикер для React.
• react-simple-timefield - demo - Простое поле ввода времени.
• react-timezone-select - demo - Динамический, лаконичный выбор часового пояса. основанный на react-select.
• DevExtreme React Scheduler - Высокопроизводительный планировщик / календарь на основе плагинов Material Design.
• jQWidgets Scheduler - Полная библиотека расписания.
• react-calendar - Календарь для вашего React приложение.
• react-date-picker - Выбор даты для вашего React приложение.
• schedule-x - Material design Календарь событий и компоненты выбора даты. Демо-сайт: https://schedule-x.dev/

Сборщик эмодзи

• interweave-emoji-picker - А. React emoji picker на основе Interweave и Emojibase.

Типы ввода

Маскированные входы, специализированные входы; адрес электронной почты / номер телефона / кредитная карта / и т. Д.

• react-credit-cards - Красивые кредитные карты для ваших форм оплаты.
• react-payment-inputs - demo Контейнер с нулевой зависимостью для помощи с полями ввода платежных карт.
• react-input-mask - demo - Еще один. react компонент для маскировки входа.
• @lunasec/react-sdk - docs Защищенные, затвердевшие компоненты формы, которые автоматически шифруют / токенизируют все данные.
• react-numpad - demo - Расширяемый блок управления номерами для номеров, дат и времени.
• react-multi-email - demo Формат нескольких электронных писем в качестве типов пользователей.

автозаполнение

Autosuggest / autocomplete / typeahead

• react-autosuggest - WAI-ARIA совместимый React автопредложите компонент.
• react-typeahead - чистый react- на основе Typeahead и Typeahead-tokenizer.

Выбрать

• react-aria-menubutton - Полностью доступный, легко тематический, React- Кнопка меню с питанием.
• react-functional-select - demo - микроразмерный и микрооптимизированный выбранный компонент для React.js.
• react-mobile-picker - demo - iOS, как компонент Select Box.
• react-select - Контроль выбора, построенный с и для React Дж.
• react-column-select - Выберите компонент, созданный для react.
• react-select-search - demo - легкий компонент выбора для React

Цветной Пикер

• coloreact - Крошечный цветной пикер для React.
• react-color - Это крошечный компонент виджета для выбора цвета React приложения.
• react-colorful - Крошечный (2,5 КБ), без зависимостей, быстрый и доступный компонент для выбора цвета.
• react-input-color - React Компонент ввода цвета с помощью hsv Color picker.

переключаться

• @anatoliygatt/heart-switch - demo Полностью тематический и доступный компонент переключателя в форме сердца.
• react-ios-switch - React Компонент переключения.
• react-toggle - Элегантный, доступный компонент переключения для ReactТакже прославленный чекбокс.
• ui-switch - Наиболее полный компонент Toggle

Слайдер

• react-slider - Компонент слайдера для React.

Радио кнопка

• react-radio-group - Лучшие радиокнопки.

Выбор типа

Пусть пользователь выбирает что-то (например, тег) во время ввода

• react-autocomplete-input - Поле автоматического ввода для React.
• react-mentions - Упомяните людей в тексте.
• rich-textarea - Текстовая зона для окрашивания, выделения, украшения текстов и предоставления автозаполнения.

Tag Input

Пусть пользователь добавляет несколько тегов в один ввод

• react-tag-input - Фантастически простой компонент тегов для вашего React Проекты.
• react-tagsinput - Простой react компонент для ввода тегов.
• react-tokeninput - Компонент Tokeninput для React.
• tagify - demo & docs - Легкий, эффективный компонент ввода тегов.

Автоматизация ввода / Textarea

• react-input-autosize - Поле ввода автоматической калибровки для React.
• react-autowidth-input - Высоконастраиваемое и расширяемое поле ввода автоматического размера, построенное с помощью крючков.
• react-textarea-autosize - <textarea/> компонент для React который растет вместе с содержанием.

Звездный рейтинг

• react-rating - demo - Нулевая зависимость, высоко настраиваемый рейтинговый компонент.
• react-awesome-stars-rating - demo - Компонент звездного рейтинга с доступностью.
• react-star-rating-input - React.js Компонент для входа в 0-5 (или более) звезд.

Drag and Drop

• react-beautiful-dnd - Красивое и доступное перетаскивание для списков React
• react-dnd - Скачать и скачать для React.
• react-drag-sizing - «Drag to resize» (размер) React Компонент.
• react-draggable - React перетаскивающийся компонент.
• react-dragula - Перетаскивай и бросай так просто, что больно.
• react-dropzone - Простая зона перетаскивания HTML5 с React.js.
• react-movable - Доступная и минималистическая (<4kB gzipped) библиотека для вертикального перетаскивания списков и таблиц.
• react-sortable-pane - Сортируемый и измеримый компонент панели для React.
• neodrag - Многокадровые библиотеки для перетаскивания. Выберите фреймворк, поведение перетаскивания API останется прежним.

Сортируемый список

Пусть пользователь определит порядок в списке

• react-anything-sortable - Сортируйте детей с сенсорной поддержкой и совместимостью IE8.
• sortablejs - Списки, переупорядоченные методом перетаскивания, внутри и между списками.

Богатый текстовый редактор

• alloyeditor - Редактор WYSIWYG на базе CKEditor с полностью переписанным UI.
• ckeditor4-react - Официальный CKEditor 4 богатый текстовый редактор.
• ckeditor5-react - Официальный CKEditor 5 богатый текстовый редактор.
• draft-js - А. React Рамки для создания текстовых редакторов.
• edtr-io - demo - docs - WYSIWYG онлайн-редактор с плагинами.
• megadraft - Богатый текстовый редактор, построенный поверх draft.js.
• react-ace - Ace (продвинутый) Code Редактор) обертка.
• react-codemirror - demo Компонент CodeMirror для React.
• react-contenteditable - React компонент для дива с редактируемым содержимым.
• react-draft-wysiwyg - Редактор WYSIWYG построен поверх DraftJS.
• react-editor - Простой редактор с богатым текстом, который может вставлять изображения и HTML.
• react-medium-editor - Обёртка для среднего редактора.
• react-monacoeditor - Компонент редактора Monaco React.
• react-simple-code-editor - Простые без излишеств code Редактор с подсветкой синтаксиса
• react-quill - Обертка Квилла.
• react-trumbowyg - Trumbowyg Обертка.
• remirror - demo - docs - Инструментарий ProseMirror для React.
• slate - demo - docs Полностью настраиваемый фреймворк для создания богатых текстовых редакторов.
• smartblock - demo - docs Блок-редактор WYSIWYG на основе ProseMirror.
• tiptap - demo - docs - Безголовый редактор для веб-мастеров.

Markdown редактор

• react-simplemde-editor - React компонентная обертка для EasyMDE (the most fresh SimpleMDE fork).
• react-markdown-editor - А. markdown Редактор использует ReactРефлюкс.
• react-md-editor - Простой markdown Редактор с предварительным просмотром, реализованный с React.js и TypeScript.

Изображение Editing

Манипуляция изображениями

• react-avatar-editor - Facebook-подобный, аватар / компонент изображения профиля.
• react-avatar-generator - Создайте веселый калейдоскоп для аватаров пользователей.
• react-easy-crop - Компонент для обрезки / вращения изображений / видео с легким взаимодействием. Прикоснись дружелюбно.
• react-image-crop - Адаптивный инструмент обработки изображений для React.
• react-image-cropper - Фотограф.
• react-advanced-cropper - А. react Библиотека агрономов для создания агронома, точно подходящего для вашего сайта design.
• react-mobile-cropper - Готовая к использованию библиотека обработки изображений очень вдохновлена популярными Android-обработчиками. основанный на react-advanced-cropper.

Коллекции компонентов Form

• formsy-material-ui - Обертка совместимости Formsy для Material UI Формировать компоненты.
• formsy-react-components - Набор из React Компоненты JS для использования в форми-react форма.
• react-input-enhancements - Набор усовершенствований для входного контроля.
• react-widgets - An à la carte набор полированных, расширяемых и доступных входов.

Разное

• @anatoliygatt/numeric-stepper - demo - Полностью тематический и доступный цифровой компонент.
• interweave - React Библиотека для безопасного перевода HTML, атрибуты фильтра, текст автозавертывания с помощью спичек, визуализация символов эмодзи и многое другое.
• react-designer - Легко настраивается, легкая, редактируемая векторная графика в вашем react компонентов.
• react-upload-gallery - React Скачать Image Gallery. Drag & Drop, Sortable, Customize.

Синтаксис Highlight

• react-syntax-highlighter - Компонент подсветки синтаксиса с Prismjs или Highlightjs AST с использованием встроенных стилей.

UI планировка

Back to top ⬆️

Компоненты для компоновки UI приложения

• autoresponsive-react - Автоотзывчивая библиотека компоновки сетки.
• hedron - Система Flexbox без излишеств, питаемая стилизованными компонентами.
• m-react-splitters - Компонент сплиттера, написанный на TypeScript.
• muuri-react - demo - docs - Адаптивные, сортируемые, фильтруемые и перетаскивающиеся сетки.
• react-grid-layout - Перетаскиваемая и измеримая схема сетки с адаптивными точками останова, для React.
• react-layman - demo - Динамический менеджер макета плитки с вкладками
• react-masonry-component - Обертка для масонства @desandro.
• react-reflex - Компонент контейнера с гибкой компоновкой для продвинутых React веб-приложения.
• react-spaces - demo/docs - Нестабильные якорные, большие, прокручиваемые компоненты.
• react-stonecutter - Анимированный компонент компоновки сетки.
• react-colrow - Адаптивные компоненты компоновки сетки. основанный на css Флексбокс. Поддержка ширины фракции, авто растет.
• react-schematic - demo Создавайте адаптивные макеты с использованием стильных схем без накладных расходов на любую конфигурацию темы

UI анимация

Back to top ⬆️

Любимые переходы

• data-driven-motion - Легко анимировать ваши данные.
• react-animatable - Библиотека анимации с использованием Web Animations API.
• react-anime - Очень простая библиотека анимации.
• react-flip-move - Неустанная анимация между DOM изменения (например, переупорядочение списка) с использованием метода FLIP.
• react-gsap-enhancer - Используйте всю мощь React и GSAP вместе.
• react-tsparticles - Легкий компонент для создания интерактивной анимации частиц
• react-motion - Весна, которая решает ваши проблемы с анимацией.
• react-mt-svg-lines - Обертка для анимации линейного хода в SVG.
• react-router-transition - Переходы, построенные для react- маршрут, питаемый react-Движение.
• react-spring - Библиотека анимации на основе физики весны.
• react-ts-typewriter - demo - Простота использования и настраиваемый эффект пишущей машинки для любого текста.
• framer-motion - Библиотека анимации и жестов.
• react-spark-scroll - Действия и анимация на основе свитков для react.
• react-track - Отслеживайте позицию DOM элементы. Создавайте классные анимации.
• react-transitive-number - Примените эффект перехода к числовым строкам, а-ля старым таймерам Groupon.
• react-web-animation - React Компоненты для Web Animations API.
• auto-size-transition - Компонент, который динамически масштабируется в соответствии с внутренним размером ребенка.
• react-particles-bg - Частичные фоны.
• gooey-react - demo/docs - Эффект гуи для ReactИспользуется для блоббинга формы / метаболов.
• react-voodoo - demo/samples - Движок аддитивной анимации, позволяющий создавать сложные андроидные/iOs-подобные анимации, рендеринг слайдеров на SSR, прогнозную инерцию, мультитач и т. Д.

Параллакс

• simple-parallax-js - demo Самый простой способ получить эффект параллакса React и JavaScript на изображениях
• react-parallax-tilt - demo - Легко применять параллаксный наклонный эффект нависания на компонентах.

UI Рамки

Back to top ⬆️

отзывчивый

Набор компонентов + адаптивная система компоновки

• ant-design - demo/docs - А UI Design Язык из Китая. индивидуальный components Доступно.
• atlaskit - Официальный представитель Atlassian UI Библиотека с компонентами от badge до tree table .
• base web - Base Web является основой для создания, развития и объединения веб-продуктов.
• carbon - demo/docs - А design Система, созданная IBM.
• cdbreact - demo - docs - Элегантный UI Набор библиотек и многоразовых компонентов для создания мобильных, адаптивных веб-сайтов и веб-приложений.
• chakra-ui - demo/docs Простой, модульный и доступный UI Компоненты для вашего React Приложения.
• ChatUI - demo/docs - UI design язык и React Библиотека для разговоров UI
• CoreUI for React - demo/docs Open Source UI Библиотека компонентов.
• evergreen - demo/docs Эвергрин React UI Структура по сегменту.
• fluentui - UX фреймворки для создания красивых кросс-платформенных приложений, которые делятся code, designи интерактивного поведения.
• gestalt - demo/docs Набор компонентов, поддерживающих Pinterest design Язык.
• grommet - Наиболее продвинутый UX фреймворк для корпоративных приложений.
• kokonut-ui - Бесплатный современный и настраиваемый UI компонентов.
• Mantine - demo/docs Полнофункциональная библиотека с более чем 100 крючками и компонентами native Поддержка темной темы
• orbit - Компоненты для построения туристических проектов.
• flowbite-react - Открытый источник UI Компонентная библиотека на основе React, Tailwind CSSи Flowbite.
• primereact - Полный UI Framework с более чем 50 компонентами material, bootstrap И настраиваемые темы.
• radix-ui - Нестильные, доступные компоненты для создания высококачественных design Системы и веб-приложения.
• react-bootstrap - Bootstrap Компоненты, построенные с React.
• react-foundation - Фонд как React компонентов.
• reakit - demo/docs Инструментарий для создания доступных богатых веб-приложений
• searchkit - React UI Компоненты/виджеты. Самый простой способ создать отличный опыт поиска с помощью Elasticsearch.
• semantic-ui-react - Официальный семантик-UI-React Интеграция.
• semi-design - demo/docs Современный, всеобъемлющий, гибкий design система.
• shadcn/ui - demo - docs Прекрасно разработанные компоненты, которые вы можете копировать и вставлять в свои приложения.
• shineout - demo - Китайский набор компонентов: элементы формы, навигация, стол, дерево, выбор дерева выпадающие и т.д.
• Tremor - demo - docs - Компоненты с открытым исходным кодом для построения диаграмм и приборных панелей.
• untitled-ui-react - demo - Красивая коллекция компонентов, построенных с React Aria и Tailwind CSS.

Material Design

• 🚀 Material UI - Полный набор компонентов. Построй свой собственный design системы или начать с Material Design.
  • Autocomplete - Доступный автозаполнение, комбобокс, мультиселект
  • Material Icons - 1000+ SVG material Иконы.
  • Modal - Доступный компонент модального диалога.
  • Slider - Доступный слайдер компонент.
  • Table - стол с сортировкой, подбором, пагинацией, виртуализацией.
  • Tree View - Доступный компонент для просмотра деревьев React.
• react-essence - Эссенция - The Essential Material Design Рамки.
• react-materialize - Material design для react, приводимый в действие материализованностью.
• react-toolbox - Набор из React компоненты, реализующие Google Material Design.
• mdbootstrap - React Bootstrap с Material Design

Мобильный

• antd-mobile - Конфигурируемый мобильный UI из Китая.
• Ionic React - Ionic Framework: легко создавать Android, Desktop и Progressive Web Apps code База.
• OnsenUI - demo/docs - фреймворк мобильного приложения Material И плоский (iOS) дизайн. На основе веб-компонентов.

Коллекции компонентов

• blueprint - demo - docs - UI Инструментарий для создания сложных, плотных веб-интерфейсов для настольных (не мобильных) приложений.
• dataminr-react-components - Коллекция многоразовых React Компоненты и полезные функции.
• shards-react - docs/demo - Красивый и современный React design система. Фримиум.
• aframe-react - Создание виртуальной реальности с помощью A-Frame и React.
• react-admin - Создайте пользовательский опыт администратора поверх сервисов REST и GraphQL.
• refine - demo - docs Создавайте приложения с интенсивным использованием данных в кратчайшие сроки. Корабли с муравьем Design Система, уровень предприятия UI набор инструментов.
• matrix-card - demo Простейший компонент для создания карт в стиле матричного дождя.
• rsuite - demo/docs - Комплект компонентов для «системы предприятий».
• lens-ui - docs Комплект компонентов, ориентированных на простоту.
• Tailwindadmin - docs Коллекция готовых ShadCN UI Компоненты, которые вы можете напрямую подключить к своему React/Next.js Проекты.

UI коммунальные услуги

Back to top ⬆️

Репортер

Report Computed Styles

Репортер видимости

Сообщение, когда компонент становится видимым/скрытым

• react-intersection-observer - React Использование интерфейса Intersection Observer API.
• react-visibility-sensor - Сенсорный компонент.
• react-waypoint - А. React компонент для выполнения функции всякий раз, когда вы прокручиваете элемент.

Измерительный репортер

Определить и сообщить об измерениях элемента

• react-component-queries - Предоставьте реквизит своим компонентам на основе их ширины и / или высоты.
• react-container-dimensions - Компонент обёртки, который обнаруживает размер элемента.
• react-dimensions - React Компонент более высокого порядка для получения размеров контейнера.
• react-height - Компонент-обертка для определения и сообщения детям элементов роста.
• react-measure - Вычислительные измерения a React компонент.
• react-sizeme - Сделай свой React Компоненты знают свою ширину и высоту.

Ввод устройства

Поверните пользовательский ввод в действия

Клавишные события

• react-hotkeys - Декларативный горячий ключ и управление областью фокусировки React.
• react-key-handler - React Компонент для обработки событий клавиатуры.
• react-keydown - Легкая обертка Keydown для React компонентов.
• react-shortcuts - Управляйте клавишными ярлыками из одного места.
• useKeyCapture - Пользовательский крючок для облегчения слушателей ключевого пресса цели / мира.
• react-keyboard-navigator - Комната из React компоненты и крючок для выбора компонентов через клавиатуру.

Scroll События

• react-scroll-components - Набор компонентов, которые react Прокрутка страницы.

Прикосновение Swipe

• react-swipe - Swipe.js как React компонент.

Мышиные события

• react-hook-mighty-mouse - demo Крюк, который отслеживает события мыши на выбранном элементе.

Мета-теги

Установите метатеги,

• react-helmet-async - Безопасный шлем для React 16+ и друзья
• react-helmet - Руководитель документа для React.

Портал

Отдать элемент в произвольном DOM узел

• react-layer-stack - Простая, но повсеместно мощная и агностическая система наслоения React.
• react-portal - React компонент для транспортировки модалей, лайтбоксов, погрузочных брусков… к document.body.

Тест поведения пользователя

A/B-тесты, эксперименты, …

• react-experiments - React компоненты для реализации UI эксперименты.

Code Design

Back to top ⬆️

Библиотеки, которые помогают code дизайн

Магазин данных

Поток данных/управление данными/хранилища данных/состояние компонентов/поток данных

• baobab-react - React Интеграция для баобаба.
• cerebral - Государственный контроллер со своим отладчиком.
• effector-react - React Привязка к эффектору, эффективному управляющему штатами.
• fireproof - demo - docs Чистая JS, нулевая зависимость, база данных CRDT - запускается в браузере и подключается к любому облаку или бэкэнду
• RxDB - demo - docs Быстрая, локальная, реактивная база данных JavaScript Приложения
• fluxible - Подключаемый контейнер для универсальных приложений потока.
• kea - Высокоуровневая архитектура для React приложения.
• react-i13n - Исполнительный, масштабируемый и подключаемый подход к инструментированию React приложение.
• react-redux - Официальное React связывания для Redux.
• redux-batched-actions - Уменьшение + действие по уменьшению действия под единым абонентским уведомлением.
• redux - Предсказуемый контейнер для JavaScript приложения.
• reselect - Избирательная библиотека для Redux.
• resourcerer - Декларативная структура сбора данных для REST API
• synergies - docs Исполнительная и распределенная контекстно-государственная библиотека для создания многоразового использования React Логика состояния путем синергии атомарных контекстных фрагментов.
• zustand - docs Быстрое решение для управления состоянием с использованием упрощенных принципов потока и бескилевых крючков api.
• teaful - Крошечный, легкий и мощный React государственное управление

Форма Логика

• data-driven-forms - Декларативный способ построения форм со всей функциональностью.
• formik - Создавайте формы без слез и легко поддерживайте валидацию.
• formsy-react - Создатель форм и валидатор для React Дж.
• Phormal - Docs & Demos - Адаптивные, многоязычные формы со встроенной валидацией, поддержкой темного режима и право-левыми языками.
• react-hook-form - React Крючки для проверки формы без хлопот.
• react-jsonschema-form - А. React компонент для создания веб-форм из JSONSchema.
• react-client-validation - Простая и сверхлегкая проверка React.
• react-final-form - Управление государством на основе подписки
• react-formawesome - Сложная библиотека для создания удивительных форм.
• surveyjs - Расширенная библиотека опросов и форм
• Formily - Высокая производительность, расширяемая и Typescript дружелюбный
• hook-form-react - docs Легкое решение без зависимости React Крючки для проверки формы.

маршрутизатор

• react-router-component - Декларативный компонент маршрутизатора React.
• react-router-scroll - React Управление прокруткой маршрутизатора.
• react-router - Полная библиотека маршрутизации для React.
• redux-first-history - Redux Первая история - Redux Обязательная поддержка истории react-router - @reach/router - wouter
• universal-router - Простой маршрутизатор в стиле промежуточного ПО для изоморфных JavaScript Веб-приложения.
• wouter - Минимально-дружественная маршрутная библиотека ~ 1,3 КБ. Ничего, кроме крючков.
• tanstack-router - Безопасный маршрутизатор со встроенным кэшированием и URL государственное управление

Советы от сервера

Свойства компонентов, асинхронно полученные по сети

• react-refetch - Простой, декларативный и композитный способ получения данных для React компонентов.
• redux-connect - Предоставляет декоратор для решения асинхронного реквизита в react- Маршрутизатор.
• axios-react - HTTP клиентский компонент React.

Связь с сервером

• apollo-client - Простой клиент кэширования для любого сервера GraphQL UI рамки.
• react-relay - Эстафета - это JavaScript Рамки для построения данных React приложения.
• query - docs Мощное асинхронное управление состоянием, утилиты серверного состояния и сбор данных для TS / JS, ReactТвердый, Свельте и Vue.

CSS Стиль

• aesthetic - Мощный тип-безопасный, каркасный агностик, CSSБиблиотека in-JS для компонентов стиля, будь то простые объекты, импорт таблиц стилей или просто ссылки на внешние названия классов.
• aphrodite - Это стиль #39, но они работают!
• inline-style-prefixer - Автопрефиксатор времени выполнения для объектов встроенного стиля.
• @classmatejs/react - Строитель компонентов с синтаксисом, таким как стилизованные компоненты и сахар вариантов Cva.
• react-container-query - Модульный адаптивный компонент.
• react-responsive - Медийные запросы в react для отзывчивых design.
• reactponsive - Отзывчивые компоненты и крючки.
• styled-components - Визуальные примитивы для компонентного возраста.
• stitches - CSS-в-JS с почти нулевым временем выполнения, SSR, многовариантной поддержкой.

HTML Шаблон

• jsx-control-statements - Опрятный если и для React JSX.

Изоморфные приложения

• hypernova - Услуга для рендеринга на стороне сервера JavaScript мнения.
• isomorphic-style-loader - изоморфный CSS Погрузчик для Webpack.
• react-server - React Фреймворк с серверным рендером для быстрой загрузки страницы.
• rill - Универсальная структура веб-приложений.
• webpack-isomorphic-tools - рендеринг на стороне сервера для ваших приложений, построенных на Webpack (например). React).

Бойлерплант

Scaffold / Starter kit / Yeoman generator / Stack ensemble / seed

• create-react-app - создавать React Приложения без конфигурации сборки.
• crisp-react - Экспресс-интеграция в TypeScript с поддержкой нескольких SPA и избеганием подводных камней.
• cra-template-redux-auth-starter - А. Redux Auth Starter Boilerplate для CRA.
• electron-react-boilerplate - Live editing development в настольном приложении.
• elegant - docs - demo - Простой React фреймворк для быстрого создания красивых и выразительных веб-приложений Next.js, Tailwind CSSи Markdown Погрузка.
• extensive-react-boilerplate - Бойлерплейт с Next.jsAuth (Sign in, Sign Up, Reset password, Confirm email, Refresh Token), Material UI, React Форма Крюка, I18NЗагрузка файлов (поддержка локальных и Amazon S3 драйверов), Тесты, CI.
• generator-starhackit - Стартовый комплект с полным стеком.
• nwb - Инструменты CLI и DevDependency для React Приложения & компоненты и модули npm.
• nx - Система сборки нового поколения с поддержкой монорепо первого класса и мощной интеграцией.
• PBandJ - Zero-Config Reusable Component Framework.
• react-hot-boilerplate - Минимальный редактирующий бойлерплан для вашего следующего ReactJS Проект.
• rockpack - Простое решение для создания React применение с SSR, объединение, подкладка, тестирование в течение 5 минут.
• create-react-dependency - создавать react Зависимости без конфигурации сборки.
• phoenix - Простой бойлерплан, который поможет вам сделать свой react Поддержка серверного рендеринга и локализации.
• react-enterprise-starter-kit - Высокомасштабируемый и великолепный исполнитель React Starter Kit для корпоративного приложения с очень простой в обслуживании кодовой базой.
• Tailwindadmin - Шаблон бесплатной панели Shadcn, построенный на React и Tailwind CSS поставляется с поддержкой нескольких кадров

Разное

• react-inlinesvg - Компонент погрузчика SVG для ReactJS.
• react-godfather - Новый способ написания функциональных компонентов без крючков.
• react-vvm - Новый подход к MVVM React, чтобы обеспечить чистое разделение проблем, уменьшить boilerplate и автоматическую оптимизацию повторного рендера для масштабируемого UI Логика.
• react-call - Позвоните React компонентов.
• redux-auth-patch - Полная система аутентификации токенов для react + redux Поддерживает изоморфный рендеринг.
• redux-search - Redux Обязательства для поиска на стороне клиента.
• tcomb-react - Альтернативный синтаксис для PropTypes
• react-universal-hooks - :tada: поддержка react Крючки везде (функциональный или классный компонент).

коммунальные услуги

Back to top ⬆️

• qrcode.react - A <QRCode/> компонент для использования с React.
• <qr-code> – A no-dependencies, customizable, animate-able, SVG-based <qr-code> element.
• react-children-utilities - Расширенные утилиты для ReactДети.
• react-media - А. CSS компонент медиа-запроса для React.
• react-middle-ellipsis - demo Усечение длинных струн в середине вместо конца.
• react-translate-component - Многоязычный/локализованный текстовый контент.

i18n

Интернационализация/L10n/локализация/перевод

• react-i18next - Интернационализация для react Сделано правильно. Использование i18next i18n экосистемы.
• react-intl - интернационализировать React приложения.
• react-localized - Интернационализация для React компонентов, основанных на gettext Формат.
• react-translate-maker - Универсальная интернационализацияi18n) библиотека с открытым исходным кодом React.
• react-intl-universal - demo интернационализировать React приложения. Не только для ReactКомпонент, но и для Vanilla JS.
• @tolgee/react - docs - Web-инструмент локализации, позволяющий пользователям переводить непосредственно в React Приложение, которое разрабатывает
• js-lingui - docs Удобочитаемая, автоматизированная и оптимизированная (5 кб) интернационализация JavaScript.

Обязательства/интеграции

• backbone-react-component - Немного изящного клея, который автоматически подключает ваши модели.
• elm-react-component - А. React компонент, который заворачивает модуль Elm для использования в React приложение.
• gl-react - Обязательства OpenGL/WebGL React Для реализации сложных эффектов над изображениями и контентом.
• react-backbone - Осведомленные о позвоночнике смеси для react и многое другое.
• react-d3-library - Библиотека с открытым исходным кодом для использования D3 в React.
• react-elm-components - Писать React Компоненты в Эльме.
• react-famous - React Мост на Famo.us.
• react-localstorage - Простая реализация локального хранилища для Facebook’s React.
• react-lottie-player - demo - Декларативный анимационный плеер.
• react-on-rails - Интеграция React Webpack + Rails для создания универсальных (изоморфных) приложений
• react-three-renderer - Скачать Three.js Canvas React.
• react-threejs - Простейшие связи между React и Three.js
• reactfire - ReactJS Смешивание для простой интеграции Firebase.
• reactive-elements - позволяет использовать React.js компонент как HTML элемент (веб-компонент).
• react-unity-webgl - Взаимодействие единства с двусторонней связью с использованием встроенной системы событий.

Интеграция со сторонними сервисами

• react-ga - React Модуль Google Analytics.
• react-google-analytics - Компонент Google Analytics.
• react-google-autocomplete - Google размещает компоненты API и крючки.
• react-recaptcha - А. react.js ReCAPTCHA для Google.
• react-stripe-checkout - Load Stripe & #39;s checkout.js react компонент. Самый простой способ использовать Checkout React.
• redux-segment - Интеграция Segment.io Analytics redux.
• react-slack-notification - Отправляйте сообщения и журналы ошибок на канал Slack напрямую.
• react-firebase-hooks - Крючки для интеграции пожарной базы в ваше приложение.

Выступление

Back to top ⬆️

UI

• inferno - Очень быстро, Reactпохожий JavaScript Библиотека для создания современных пользовательских интерфейсов.
• react-fastclick - Быстрые сенсорные события для React.
• react-static-container - Эффективно выполняет статический контент.

проверять

• react-perf-tool - Отладка производительности вашего React приложение.
• react-render-visualizer - визуализатор для ReactJS.

Ленивый груз

• react-infinite-grid - А. React компонент, который создает сетку элементов.
• react-infinite - Готовый к браузеру эффективный контейнер для прокрутки на основе UITableView.
• react-lazy-load - React компонент, который отображает элементы детей, когда они входят в видоискатель.
• react-lazyload - Загрузите свой компонент, изображение или что-либо, что имеет значение для производительности.
• react-virtualized - React компоненты для эффективного отображения больших списков и табличных данных.

Размер приложения

• babel-plugin-transform-react-remove-prop-types - Удалить ненужное React Проптипы.
• react-lite - Осуществление React Оптимизируется для небольшого размера скрипта.

Серверный рендеринг

• iSSR - Самый простой способ переместить React Обсуждение Server-Side Rendering. Обрабатывает побочные эффекты и синхронизирует состояние.
• react-esi - Библиотека для повышения производительности SSR путем разоблачения React Компоненты как Edge Side Includes (ESI)

Инструменты Dev

Back to top ⬆️

Тест

• enzyme - JavaScript Тестирование утилит для React.
• jest-cli - безболезненный JavaScript Тестирование.
• react-unit - Легкая модульная тестовая библиотека ReactJS.
• redux-test-recorder - А. redux Промежуточное ПО для автоматического создания тестов для редукторов ui взаимодействия.
• rut - React Тестирование облегчается react-test-rendererПоддержка DOM и обывателей.
• unexpected-react - Плагин для неожиданного, чтобы позволить тестирование полного React виртуальный DOM, а также мелкий рендеринг.
• playwright enables reliable end-to-end testing for modern web apps.

Redux

• redux-devtools-chart-monitor - Диаграмма монитора для Redux Инструменты.
• redux-devtools-dock-monitor - Размерный и подвижный док для Redux Мониторы DevTools.
• redux-devtools-filterable-log-monitor - Фильтруемый монитор для просмотра деревьев Redux Инструменты.
• redux-devtools-inspector - Другой Redux Монитор DevTools.
• redux-devtools-log-monitor - Монитор по умолчанию для Redux DevTools с видом на дерево.
• redux-devtools - DevTools для Redux с горячей перезагрузкой, воспроизведением действия и настраиваемым UI.
• remote-redux-devtools - Redux DevTools удаленно.

проверять

• fluxguard - Мониторинг изменений PROD, который выделяет все DOM + design Изменения.
• react-inspector - Мощность Browser DevTools инспекторов прямо внутри вас React приложение.
• reactotron - Приложение CLI и OS X для проверки вашего React JS и React Native приложения.
• Tail Lens - Tailwind Редактор в браузере: Осмотр, редактирование, предварительный просмотр, копирование.

Разное

• component-controls - demo - docs - Инструмент следующего поколения для создания быстродействующих сайтов документации.
• cosmos-js - DX инструмент для проектирования действительно инкапсулированных React компонентов.
• react-demo-tab-cli - CLI инструмент для создания демонстраций react компонентов.
• react-styleguidist - React Генератор стилей.
• standard-react - JavaScript Стандартное руководство по стилю.
• Plasmic - могущественный design Инструмент для построения вашего React компоненты визуально.
• SimpleLocalize - Инструмент CLI с открытым исходным кодом для поиска i18n ключи в React Проекты.
• react-device-frameset - React компонент рамок устройства.

Разное

Back to top ⬆️

• DataFormsJS JSX Loader - маленький JavaScript Компилятор для быстрого преобразования JSX в JS непосредственно на веб-странице.
• html-to-react-components - Извлеките аннотированные части HTML в React компонентов в виде отдельных модулей.
• htmltojsx - Автоматически AJAXify plain HTML С силой могущества ReactЭто и #39; магия!
• jsonx - React Синтаксис Джона.
• mozaik - Mozaïk — инструмент, основанный на нодежах. react /d3/ стилус для легкого изготовления красивых приборных панелей.
• react-blessed - А. react Благословенный дар.
• jsondiffpatch-react - Джон Диффинг.
• iron-session - Безопасная, без состояния и сессионная библиотека на основе cookie.

Статический генератор сайтов

• gatsby - Превратите простой текст в динамические блоги и веб-сайты React.js.

Облачные решения

Back to top ⬆️

Базы данных

• BCMS - Система управления контентом на основе API с открытым исходным кодом для Gatsby, Nuxt и Next.
• crisp-bigquery - Google BigQuery с Express in TypeScript.
• react-server-routing-example - Универсальная клиент-серверная маршрутизация и данные с помощью AWS DynamoDB.