Для React разработано большое количество библиотек, которые позволяют без проблем работать даже с очень сложной анимацией, да и не только с ней. В подборку мы постарались добавить те из них, что способны в разы повысить скорость и эффективность работы специалиста. В статье собраны далеко не все библиотеки, которые заслуживают внимания, поэтому, если у вас есть собственный «фаворит», расскажите об этом инструменте в комментариях. Что же, приступим!
Formik
Это отличная open-source-библиотека для React или React Native. Она предназначена для создания форм и выполняет три основные задачи:
управление состоянием формы
валидация формы
отправка формы
Если форму разрабатывать лишь на React, то разработчику нужно самостоятельно работать над многими задачами, включая настройку состояния и отправку формы. При этом нужно учитывать множество различных нюансов:
хранение и отслеживание значений полей формы
обработка ввода пользователя с изменением состояния формы
описание процесса валидации
описание процесса отправки формы
Formik избавляет разработчика от головной боли, беря большую часть этих нюансов на себя. В итоге процесс создания формы можно значительно ускорить, плюс он становится интуитивно понятным, что особенно важно при добавлении сложных форм. Эта библиотека — must have для тех читателей Хабра, кому приходится писать много форм для своего приложения.
Если нужна дополнительная информация, то вот официальная документация библиотеки.
React Popper
Библиотека, которая предоставляет возможность без особых проблем добавлять всплывающие подсказки, окна и другие типы наложений для проектов. Одна из важнейших возможностей — размещение слоёв относительно любого элемента на странице. Как следствие, разработчик может создавать сложные макеты пользовательского интерфейса с большим количеством всплывающих элементов.
Кроме того, разработчики активно поддерживают библиотеку, проект продолжает развиваться. Установка библиотеки реализуется при помощи несложной команды — npm i @popperjs/core.
А вот официальная страничка библиотеки на GitHub.
React animations
Ещё одна отличная библиотека, которая включает в себя большое количество коллекций анимаций. React Animations, к слову, поддерживает работу практически с любой inline-style-библиотекой с возможностью применения объектов для определения ключевых кадров анимации. Например, Aphrodite, Radium либо styled-components.
Вот пример того, на что способна библиотека:
И ещё пример:
Вот так выглядит код анимации:
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
Ещё одна библиотека, крайне полезная для многих. Она предоставляет набор из более чем 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
Библиотека на базе D3.js, позволяющая строить графики с использованием HTML, SVG и CSS. Её основные преимущества — «заточенность» под React плюс использование компонентного подхода, что даёт возможность обеспечить хорошую модульность. Графики, которые строятся с использованием Recharts, легко комбинировать и использовать заново. Кроме того, стандартные элементы можно без проблем модифицировать.
Что касается самих стандартных элементов, то их много, включая обычные, линейные и круговые диаграммы. Если нужен какой-то особый тип диаграмм, то его можно добавить с использованием Recharts API.
Установка библиотеки выполняется при помощи команды npm install recharts.
Вот официальная страничка проекта.
Framer Motion
Ещё одна отличная библиотека, которая позволяет добавлять разнообразные анимации и переходы в React-проекты. Работа с библиотекой интуитивно понятна, а сама она поставляется с большим количеством готовых анимационных шаблонов.
Особенность Framer Motion в том, что библиотека базируется на ещё одной библиотеке — Motion.
Работать с Framer Motion, как и говорилось выше, просто. Она предоставляет простой API. С его помощью можно задать тип анимации, необходимый для текущего проекта, а также добавить нужные параметры конфигурации.
Примеры работы и информацию о расширенных функциях Motion, таких как рендеринг на стороне сервера, поддержка переменных CSS, переходы макета, можно найти на странице проекта и в официальной документации.
Достоинство библиотеки — она постоянно обновляется. Помочь она может во многом — от создания простого эффекта наведения курсора до гораздо более сложных и комплексных анимаций.
React-PDF
А это отличающаяся от прочих инструментов из подборки библиотека. Она позволяет добавлять поддержку PDF-документов. Базируется она на PDF.js, который используется для отображения PDF-файлов в браузере.
Плюс библиотеки в том, что она даёт возможность отображать PDF-документы прямо в браузере. Необходимости в сторонних плагинах или ПО нет. Соответственно, пользователи могут работать с такими документами на любой платформе.
Более того, библиотека позволяет извлекать текст и изображения из PDF-файлов. Также она даёт возможность менять внешний вид и компоновку документов с добавлением аннотаций, комментариев и других интерактивных элементов в свои PDF-файлы.
Вот официальный GitHub проекта.
Dnd Kit
Наконец, последняя библиотека из подборки. Она необходима для создания элементов 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 позволяет указывать типы элементов, которые можно перетаскивать.
Подробности — на официальной страничке библиотеки.
На этом всё. Если у вас есть собственные инструменты для анимаций или добавления других возможностей, расскажите о них в комментариях.
