React это одна из самых популярных фронтенд-библиотек JavaScript. Разработанный Facebook, он позволяет вам разбивать даже самые сложные пользовательские интерфейсы на простые, доступные для повторного использования компоненты. Вместо того, чтобы самостоятельно создавать абсолютно все, вы можете установить и использовать внешние компоненты для добавления новых особенностей и функционала.
В этой статье мы поделимся с вами 15 интересными React-компонентами, которые активно поддерживаются и могут быть хорошим подспорьем для вашего следующего проекта.
React Burger Menu
React-burger-menu предлагает React-компонент боковой панели, лежащей вне холста, с многочисленными эффектами и стилями, а также CSS-переходами. Также этот компонент поддерживает большое количество анимаций, например, «слайд», «стопка», «пузырь», «смещение» и многие другие. Он использует современные функции CSS3, так что некоторые анимации могут неправильно отображаться в отдельных браузерах.
React Slick
React-компонент для создания красивых адаптивных слайдеров типа «карусель». Это основанная на React версия slick carousel. Компонент предлагает больше количество разнообразных вариантов карусели, которые можно настраивать, включая бесконечное вращение, автозапуск, отложенную загрузку и многое другое.
React Google Map
Этот компонент React основан на Google Maps API. Он совершенно изоморфен и позволяет вам выводить на карту анимированные React-компоненты даже если Google Maps API не загружен. Благодаря внутреннему алгоритму наведения оно доступно для каждого объекта на карте.
React Photo Gallery
Адаптивная и хорошо настраиваемая React-фотогалерея, не имеющая состояния. Она поддерживает исходное соотношение сторон ваших фотографий и использует фактические элементы изображения. Кроме того, вы можете передавать свои пользовательские компоненты изображения для добавления дополнительных функций, таких как подписи и «избранное».
React Credit Cards
Современный и красивый компонент кредитных карт, который можно использовать в формах оплаты. У него есть встроенный валидатор кредитных карточек, который проверяет номер карты и распознает ее тип. Поддерживает все виды кредитных карт, доступные в Payment.
React Dates
React-dates это интерактивный, полностью оснащенный и дружественный к мобильным устройствам компонент для выбора даты. Он дает вам возможность выбирать отдельную дату или диапазон дат используя встроенные свойства. Вы также можете настроить вид вводимых данных и календарь.
React Notification System
Цельный и полностью настраиваемый компонент для уведомлений в React. С помощью встроенных свойств уведомлений вы можете определять заголовок, сообщение, позицию, действие и многое другое. Для оптимального внешнего вида, чтобы избежать конфликтов позиционирования, этот компонент должен отображаться в вашем приложении в HTML-элементе верхнего уровня.
ReactPlayer
Компонент React для проигрывания видео из различных источников (файлов и URL), например, YouTube, Facebook, Twitch. Компонент анализирует URL и загружает подходящую разметку и внешние SDK для проигрывания видео. Встроенные свойства могут использоваться для управления громкостью, шириной и высотой плеера и т.п.
React Beautiful DnD
Библиотека React от Atlassian для создания компонентов перетаскивания. Она предлагает чистый и мощный API, который прост в использовании, но при этом предоставляет множество параметров настройки и элементов управления. Сгенерированные компоненты имеют плавные управляемые GPU анимации, которые естественно отражают, когда элементы подбираются или переупорядочиваются.
React Trend
React компонент от команды Unsplash, который можно использовать для создания красивых линейных графиков, подходящих для отображения трендов и показателей активности. Этот проект придерживается минималистичного подхода и предоставляет простое, элегантное решение одной конкретной проблемы, поэтому не стоит ожидать целую библиотеку графиков.
React MD Spinner
Это спиннер – компонент материального дизайна – для React. Вы можете начать использовать его сразу же, поскольку он на 100% состоит из inline CSS и не требует какой-либо конфигурации. Ест возможность изменять цвет, размер и скорость анимации, а также осуществлять рендеринг на стороне сервера.
React Vis
React-vis это коллекция React-компонентов для отображения распространенных диаграмм визуализации данных. Поддерживает различные типы диаграмм, такие как линейные, диаграммы-области, гистограммы, тепловые карты, круговые и кольцеобразные диаграммы. React-vis прост в настройке и использовании и предоставляет набор основных строительных блоков для различных диаграмм, которые можно кастомизировать.
React Avater Editor
Это редактор аватарок и картинок профиля для React. Он обеспечивает простой и быстрый способ изменять размер, обрезать и поворачивать загруженные изображения используя интерфейс пользователя. В результате изображения имеют то же разрешение, что и оригинальные, без какой-либо потери качества.
React-Grid-Layout
Это перетаскиваемая и масштабируемая система макета-сетки. Используется только React, поэтому нет необходимости в jQuery. Компонент совместим с приложениями, созданными сервером. React-Grid-Layout поддерживает виджеты, которые можно перетаскивать и изменять их размер, статические виджеты, отзывчивые точки останова и многое другое.
React Paginate
Компонент React для создания разбивки на страницы. Он легок в использовании и может быть настроен с помощью CSS. Со встроенными свойствами вы можете установить число отображаемых страниц, их диапазон, добавить метки для кнопок «предыдущая» и «следующая», а также многое другое.
***
Подписывайтесь на наш канал в Telegram!
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
супер