15 прекрасных компонентов React

1
16535
views

Компонент React

React это одна из самых популярных фронтенд-библиотек JavaScript. Разработанный Facebook, он позволяет вам разбивать даже самые сложные пользовательские интерфейсы на простые, доступные для повторного использования компоненты. Вместо того, чтобы самостоятельно создавать абсолютно все, вы можете установить и использовать внешние компоненты для добавления новых особенностей и функционала.

В этой статье мы поделимся с вами 15 интересными React-компонентами, которые активно поддерживаются и могут быть хорошим подспорьем для вашего следующего проекта.


React burger menu

React Burger Menu

React-burger-menu предлагает React-компонент боковой панели, лежащей вне холста, с многочисленными эффектами и стилями, а также CSS-переходами. Также этот компонент поддерживает большое количество анимаций, например, «слайд», «стопка», «пузырь», «смещение» и многие другие. Он использует современные функции CSS3, так что некоторые анимации могут неправильно отображаться в отдельных браузерах.


React Slick

React Slick

React-компонент для создания красивых адаптивных слайдеров типа «карусель». Это основанная на React версия slick carousel. Компонент предлагает больше количество разнообразных вариантов карусели, которые можно настраивать, включая бесконечное вращение, автозапуск, отложенную загрузку и многое другое.


React Google Map

React Google Map

Этот компонент React основан на Google Maps API. Он совершенно изоморфен и позволяет вам выводить на карту анимированные React-компоненты даже если Google Maps API не загружен. Благодаря внутреннему алгоритму наведения оно доступно для каждого объекта на карте.


React Photo Gallery

React Photo Gallery

Адаптивная и хорошо настраиваемая React-фотогалерея, не имеющая состояния. Она поддерживает исходное соотношение сторон ваших фотографий и использует фактические элементы изображения. Кроме того, вы можете передавать свои пользовательские компоненты изображения для добавления дополнительных функций, таких как подписи и «избранное».


React Credit Cards

React Credit Cards

Современный и красивый компонент кредитных карт, который можно использовать в формах оплаты. У него есть встроенный валидатор кредитных карточек, который проверяет номер карты и распознает ее тип. Поддерживает все виды кредитных карт, доступные в Payment.


React Dates

React Dates

React-dates это интерактивный, полностью оснащенный и дружественный к мобильным устройствам компонент для выбора даты. Он дает вам возможность выбирать отдельную дату или диапазон дат используя встроенные свойства. Вы также можете настроить вид вводимых данных и календарь.


React Notification System

React Notification System

Цельный и полностью настраиваемый компонент для уведомлений в React. С помощью встроенных свойств уведомлений вы можете определять заголовок, сообщение, позицию, действие и многое другое. Для оптимального внешнего вида, чтобы избежать конфликтов позиционирования, этот компонент должен отображаться в вашем приложении в HTML-элементе верхнего уровня.


ReactPlayer

ReactPlayer

Компонент React для проигрывания видео из различных источников (файлов и URL), например, YouTube, Facebook, Twitch. Компонент анализирует URL и загружает подходящую разметку и внешние SDK для проигрывания видео. Встроенные свойства могут использоваться для управления громкостью, шириной и высотой плеера и т.п.


React Beautiful DnD

React Beautiful DnD

Библиотека React от Atlassian для создания компонентов перетаскивания. Она предлагает чистый и мощный API, который прост в использовании, но при этом предоставляет множество параметров настройки и элементов управления. Сгенерированные компоненты имеют плавные управляемые GPU анимации, которые естественно отражают, когда элементы подбираются или переупорядочиваются.


React Trend

React Trend

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


React MD Spinner

React MD Spinner

Это спиннер – компонент материального дизайна – для React. Вы можете начать использовать его сразу же, поскольку он на 100% состоит из inline CSS и не требует какой-либо конфигурации. Ест возможность изменять цвет, размер и скорость анимации, а также осуществлять рендеринг на стороне сервера.


React Vis

React Vis

React-vis это коллекция React-компонентов для отображения распространенных диаграмм визуализации данных. Поддерживает различные типы диаграмм, такие как линейные, диаграммы-области, гистограммы, тепловые карты, круговые и кольцеобразные диаграммы. React-vis прост в настройке и использовании и предоставляет набор основных строительных блоков для различных диаграмм, которые можно кастомизировать.


React Avater Editor

React Avater Editor

Это редактор аватарок и картинок профиля для React. Он обеспечивает простой и быстрый способ изменять размер, обрезать и поворачивать загруженные изображения используя интерфейс пользователя. В результате изображения имеют то же разрешение, что и оригинальные, без какой-либо потери качества.


React-Grid-Layout

React-Grid-Layout

Это перетаскиваемая и масштабируемая система макета-сетки. Используется только React, поэтому нет необходимости в jQuery. Компонент совместим с приложениями, созданными сервером. React-Grid-Layout поддерживает виджеты, которые можно перетаскивать и изменять их размер, статические виджеты, отзывчивые точки останова и многое другое.


React Paginate

React Paginate

Компонент React для создания разбивки на страницы. Он легок в использовании и может быть настроен с помощью CSS. Со встроенными свойствами вы можете установить число отображаемых страниц, их диапазон, добавить метки для кнопок «предыдущая» и «следующая», а также многое другое.

***
Подписывайтесь на наш канал в Telegram!


javascript logo

Хочешь проверить свои знания по JS?

Подпишись на наш канал с тестами по JS в Telegram!

×

1 КОММЕНТАРИЙ

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here