react-icons

npm install react-icons --save

Большая библиотека иконок с удобными интеграцией и контролем
Ссылка на библиотеку

🥶 React | #visual #icons

react-hot-toast

npm install react-hot-toast

Легковесная и гибкая библиотека с кастомизируемыми уведомлениями на сайте

Ссылка на библиотеку

🥶 React | #visual #notifications #alert #notify

nivo-charts

npm install @nivo/line

Библиотека которая предоставляет готовые компоненты для визуализации данных в графиках, чартах, картах и много чего еще

Ссылка на библиотеку

🥶 React | #visual #charts

floating-ui

npm install @floating-ui/dom

Это библиотека, которая помогает создавать «плавающие» элементы, такие как tooltip, popup, dropdown и многие другие

Ссылка на библиотеку

🥶 React | #visual #float #element #flex

xlsx

npm install xlsx

Библиотека для создания XLSX таблиц на Front-end'е из любых словарей
Удобно для фильтрации динамически обновляющихся таблиц

Ссылка на библиотеку

🥶 React | #Excel #XLSX #Export #DataProcessing #JSON #Automation #FileSaver #JavaScript #Coding #Spreadsheet

spinners-react && react-spinners

npm install spinners-react

npm install react-spinners

Сразу две легковесные библиотеки спиннеров с кастомизацией и поддержкой разных типов анимации

Ссылка на библиотеку Spinners-react
Ссылка на библиотеку Spinners-react

❤️ React Tips & Tricks | #visual #loading #spinner

react-awesome-slider

npm install react-awesome-slider

Гибкая библиотека для создания слайдеров с анимацией, поддержкой кастомных стилей и расширенных настроек.

Ссылка на библиотеку

❤️ React Tips & Tricks | #visual #slider #animation #carousel #react #UX

react-step-progress-bar

npm install react-step-progress-bar

Простая библиотека для создания пошаговых прогресс-баров с поддержкой кастомизации и динамических изменений.

Ссылка на библиотеку

❤️ React Tips & Tricks | #visual #progressbar #steps #react #UI

react-content-loader && skeletonreact

npm install react-content-loader

Библиотека для создания skeleton-загрузчиков с помощью SVG. Позволяет легко кастомизировать форму, размер и анимацию для имитации загрузки контента.
&&
skeletonreact - сайт с удобным конструктором и большой базой готовых шаблонов skeleton-загрузчиков

Ссылка на библиотеку | Ссылка на конструктор

❤️ React Tips & Tricks | #visual #loading #skeleton #animation #react #UI #customization

react-tooltip

npm install react-tooltip

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

Ссылка на библиотеку

❤️ React Tips & Tricks | #tooltip #hover #react #UI #customization #effects #usability

react-awesome-reveal

npm install react-awesome-reveal

Библиотека для добавления анимации при появлении элементов с использованием Intersection Observer API. Легкая настройка и готовые эффекты.

Ссылка на библиотеку

❤️ React Tips & Tricks | #visual #animation #reveal #react #UI #effects #motion

react-typewriter-effect

npm install react-typewriter-effect

Простая библиотека для создания эффекта печатающего текста с поддержкой настроек скорости, пауз и стилей.

Ссылка на библиотеку

❤️ React Tips & Tricks | #visual #typewriter #animation #react #UI #text_effects #customization

react-dropzone

npm install react-dropzone

Библиотека для создания драг-н-дроп области для загрузки файлов. Поддерживает настройку стилей, обработку событий и валидаторы файлов.

Ссылка на библиотеку

❤️ React Tips & Tricks | #dragndrop #fileupload #react #UI #customization #events

react-circular-progressbar

npm install react-circular-progressbar

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

Ссылка на библиотеку

❤️ React Tips & Tricks | #visual #progress-bar #circular #react #UI #customization #animation

react-kawaii

npm install react-kawaii

Библиотека для создания милых иллюстраций с настраиваемыми эмоциями, формами и цветами. Подходит для игровых интерфейсов и оживления UI.

Ссылка на библиотеку

❤️ React Tips & Tricks | #visual #illustration #react #fun #kawaii #UI #creative