![](https://habrastorage.org/getpro/habr/upload_files/735/329/eab/735329eab7e14bc5b05c07713fddc64a.png)
Для React разработано большое количество библиотек, которые позволяют без проблем работать даже с очень сложной анимацией, да и не только с ней. В подборку мы постарались добавить те из них, что способны в разы повысить скорость и эффективность работы специалиста. В статье собраны далеко не все библиотеки, которые заслуживают внимания, поэтому, если у вас есть собственный «фаворит», расскажите об этом инструменте в комментариях. Что же, приступим!
Formik
![](https://habrastorage.org/getpro/habr/upload_files/ff7/913/5be/ff79135be3b715565967c7712f0ef83e.png)
Это отличная open-source-библиотека для React или React Native. Она предназначена для создания форм и выполняет три основные задачи:
управление состоянием формы
валидация формы
отправка формы
Если форму разрабатывать лишь на React, то разработчику нужно самостоятельно работать над многими задачами, включая настройку состояния и отправку формы. При этом нужно учитывать множество различных нюансов:
хранение и отслеживание значений полей формы
обработка ввода пользователя с изменением состояния формы
описание процесса валидации
описание процесса отправки формы
Formik избавляет разработчика от головной боли, беря большую часть этих нюансов на себя. В итоге процесс создания формы можно значительно ускорить, плюс он становится интуитивно понятным, что особенно важно при добавлении сложных форм. Эта библиотека — must have для тех читателей Хабра, кому приходится писать много форм для своего приложения.
Если нужна дополнительная информация, то вот официальная документация библиотеки.
React Popper
![](https://habrastorage.org/getpro/habr/upload_files/b3e/8c5/698/b3e8c569883798e0da35a62098362b83.png)
Библиотека, которая предоставляет возможность без особых проблем добавлять всплывающие подсказки, окна и другие типы наложений для проектов. Одна из важнейших возможностей — размещение слоёв относительно любого элемента на странице. Как следствие, разработчик может создавать сложные макеты пользовательского интерфейса с большим количеством всплывающих элементов.
Кроме того, разработчики активно поддерживают библиотеку, проект продолжает развиваться. Установка библиотеки реализуется при помощи несложной команды — npm i @popperjs/core.
А вот официальная страничка библиотеки на GitHub.
React animations
Ещё одна отличная библиотека, которая включает в себя большое количество коллекций анимаций. React Animations, к слову, поддерживает работу практически с любой inline-style-библиотекой с возможностью применения объектов для определения ключевых кадров анимации. Например, Aphrodite, Radium либо styled-components.
Вот пример того, на что способна библиотека:
![](https://habrastorage.org/getpro/habr/upload_files/78f/d13/949/78fd13949d2ae3a9afa26d9128a76162.gif)
И ещё пример:
![](https://habrastorage.org/getpro/habr/upload_files/ec6/875/a06/ec6875a06ae31fff81889c77cba70f11.gif)
Вот так выглядит код анимации:
import React, { Component } from 'react';
import styled, { keyframes } from 'styled-components';
import { bounce } from 'react-animations';
import './style.css';
const Bounce = styled.div`animation: 2s ${keyframes`${bounce}`} infinite`;
export default class ReactAnimations extends Component {
render() {
return (
<Bounce><h1>Hello Animation Bounce</h1></bounce>
);
}
}
В дополнение к самой библиотеке можно посоветовать решение для использования React animations при прокрутке — react-animate-on-scroll.
React Icons
![](https://habrastorage.org/getpro/habr/upload_files/36a/038/8a4/36a0388a485857dea49c0b41bc881a54.png)
Ещё одна библиотека, крайне полезная для многих. Она предоставляет набор из более чем 1 000 иконок. В целом, там есть всё — на любой вкус и цвет. А если нет, иконки можно кастомизировать, настроить под себя, изменив их размер и цвет.
Работать с иконками просто благодаря API. Кроме того, разработчик может создавать пользовательские наборы значков либо же переопределять стили отдельных значков по умолчанию, если это нужно для конкретного проекта.
Устанавливается библиотека без проблем — нужно выполнить команду npm install react-icons --save.
А вот пример использования:
import { FaBeer } from 'react-icons/fa';
class Question extends React.Component {
render() {
return <h3> Lets go for a <FaBeer />? </h3>
}
}
Официальный GitHub библиотеки — по этой ссылке.
Recharts
![](https://habrastorage.org/getpro/habr/upload_files/349/d00/971/349d009710ae1eee8d40567edaf1c88b.png)
Библиотека на базе D3.js, позволяющая строить графики с использованием HTML, SVG и CSS. Её основные преимущества — «заточенность» под React плюс использование компонентного подхода, что даёт возможность обеспечить хорошую модульность. Графики, которые строятся с использованием Recharts, легко комбинировать и использовать заново. Кроме того, стандартные элементы можно без проблем модифицировать.
Что касается самих стандартных элементов, то их много, включая обычные, линейные и круговые диаграммы. Если нужен какой-то особый тип диаграмм, то его можно добавить с использованием Recharts API.
![](https://habrastorage.org/getpro/habr/upload_files/6b6/750/a7c/6b6750a7ce17f117fbf9c1ef983fa3d2.jpg)
Установка библиотеки выполняется при помощи команды npm install recharts.
Вот официальная страничка проекта.
Framer Motion
![](https://habrastorage.org/getpro/habr/upload_files/ec7/2b5/754/ec72b57544c2c0489a74dd796e00f51f.png)
Ещё одна отличная библиотека, которая позволяет добавлять разнообразные анимации и переходы в React-проекты. Работа с библиотекой интуитивно понятна, а сама она поставляется с большим количеством готовых анимационных шаблонов.
Особенность Framer Motion в том, что библиотека базируется на ещё одной библиотеке — Motion.
Работать с Framer Motion, как и говорилось выше, просто. Она предоставляет простой API. С его помощью можно задать тип анимации, необходимый для текущего проекта, а также добавить нужные параметры конфигурации.
Примеры работы и информацию о расширенных функциях Motion, таких как рендеринг на стороне сервера, поддержка переменных CSS, переходы макета, можно найти на странице проекта и в официальной документации.
Достоинство библиотеки — она постоянно обновляется. Помочь она может во многом — от создания простого эффекта наведения курсора до гораздо более сложных и комплексных анимаций.
React-PDF
![](https://habrastorage.org/getpro/habr/upload_files/883/342/801/883342801484a120b21d1cd342aa43d2.png)
А это отличающаяся от прочих инструментов из подборки библиотека. Она позволяет добавлять поддержку PDF-документов. Базируется она на PDF.js, который используется для отображения PDF-файлов в браузере.
Плюс библиотеки в том, что она даёт возможность отображать PDF-документы прямо в браузере. Необходимости в сторонних плагинах или ПО нет. Соответственно, пользователи могут работать с такими документами на любой платформе.
Более того, библиотека позволяет извлекать текст и изображения из PDF-файлов. Также она даёт возможность менять внешний вид и компоновку документов с добавлением аннотаций, комментариев и других интерактивных элементов в свои PDF-файлы.
Вот официальный GitHub проекта.
Dnd Kit
![](https://habrastorage.org/getpro/habr/upload_files/5c1/330/bea/5c1330bea0102ec6af553ba523723010.png)
Наконец, последняя библиотека из подборки. Она необходима для создания элементов drag and drop в React. Соответственно, разработчик может без проблем добавлять эти функции в свои приложения, давая возможность пользователям управлять контентом при помощи визуальных инструментов.
Важная особенность библиотеки — бесшовная работа с HTML5 drag-and-drop API. То есть не нужны внешние библиотеки или дополнительные плагины. Вот пример кода:
import React, {useState} from 'react';
import {DndContext} from '@dnd-kit/core';
import {Draggable} from './Draggable';
import {Droppable} from './Droppable';
function Example() {
const [parent, setParent] = useState(null);
const draggable = (
<Draggable id="draggable">
Go ahead, drag me.
</Draggable>
);
return (
<DndContext onDragEnd={handleDragEnd}>
{!parent ? draggable : null}
<Droppable id="droppable">
{parent === "droppable" ? draggable : 'Drop here'}
</Droppable>
</DndContext>
);
function handleDragEnd({over}) {
setParent(over ? over.id : null);
}
Кроме того, Dnd Kit позволяет указывать типы элементов, которые можно перетаскивать.
Подробности — на официальной страничке библиотеки.
На этом всё. Если у вас есть собственные инструменты для анимаций или добавления других возможностей, расскажите о них в комментариях.