7 полезных библиотек React, которыми вы возможно ещё не пользовались
React – популярная библиотека JavaScript для создания пользовательских интерфейсов. В свою очередь, существует множество библиотек для React, которые могут помочь сделать ваши проекты еще более яркими, продуктивными и эффективными. Библиотеки компонентов react могут значительно повысить продуктивность вашей разработки.
В этой статье я познакомлю вас с 7 лучшими библиотеками, с которыми вы, возможно, раньше не сталкивались. Независимо от того, являетесь ли вы опытным разработчиком на React или только начинаете работать с React, я думаю, что эти библиотеки станут ценным дополнением к вашему инструментарию.
Итак, без лишних слов, давайте приступать!
@react_tg – еще больше полезного материала в нашем React канале.
1. Dnd Kit
Dnd Kit – это мощная библиотека для создания элементов drag and drop в React. Она позволяет разработчикам легко внедрять функции перетаскивания в свои приложения, облегчая пользователям перестановку и организацию контента.
Одной из важнейших особенностей Dnd Kit является её способность бесшовно работать с HTML5 drag-and-drop API. Это означает, что вы можете использовать Dnd Kit для создания интерфейсов перетаскивания без необходимости полагаться на внешние библиотеки или плагины.
В дополнение к поддержке HTML5 drag-and-drop API, Dnd Kit также предоставляет ряд удобных функций и опций. Например, вы можете использовать Dnd Kit для указания типов элементов, которые можно перетаскивать, а также конкретных элементов, которые могут выступать в качестве объектов для перетаскивания.
Чтобы начать использование данной библиотеки, вам необходимо установить её внутри вашего проекта на React:
npm install @dnd-kit/core
Здесь представлено краткое руководство по эксплуатации Dnd Kit.
Проще говоря, Dnd Kit – отличный выбор для тех, кто хочет добавить функции перетаскивания в свои проекты React. Библиотека проста в использовании, что делает её ценным инструментом для любого разработчика, работающего с React.
2. React Popper
React Popper – это библиотека, которая предоставляет простой способ добавления всплывающих подсказок, всплывающих окон и других типов наложений для ваших проектов.
Одной из ключевых особенностей React Popper является способность размещать слои относительно любого элемента на странице. Это позволяет легко создавать сложные макеты пользовательского интерфейса, включающие множество всплывающих элементов.
Чтобы начать использование данной библиотеки, вам необходимо установить её внутри вашего проекта на React:
npm i @popperjs/core
Вот небольшой пример использования функционала данной библиотеки:
Popper example I'm a button
I'm a tooltip
React Popper – это мощная и простая в использовании библиотека, которая упрощает добавление всплывающих подсказок, всплывающих окон и других типов наложений к вашим компонентам React. Она активно поддерживается, что делает её отличным выбором для тех, кто хочет добавить данный функционал в свои проекты.
3. React-PDF
React-PDF – это действительно удобная библиотека, которая позволяет создавать и открывать PDF-документы в ваших приложениях React. Она основана на библиотеке под названием PDF.js , который используется для отображения PDF-файлов в браузере.
Одна из самых крутых особенностей React-PDF заключается в том, что она позволяет отображать PDF-документы прямо в браузере, без необходимости каких-либо внешних плагинов или программного обеспечения. Это означает, что ваши пользователи смогут просматривать PDF-файлы независимо от того, какое устройство или программное обеспечение они используют.
Чтобы начать использование данной библиотеки, вам необходимо установить её внутри вашего проекта на React:
npm i react-pdf
Вот небольшой пример использования функционала данной библиотеки:
import React, { useState } from 'react'; import { Document, Page } from 'react-pdf'; function MyApp() { const [numPages, setNumPages] = useState(null); const [pageNumber, setPageNumber] = useState(1); function onDocumentLoadSuccess({ numPages }) { setNumPages(numPages); } return (
Page {pageNumber} of {numPages}
); }
Важно отметить, что библиотека React-PDF может делать гораздо больше, чем просто отображать PDF-файлы. Она также позволяет извлекать текст и изображения из PDF-файлов и даже изменять внешний вид и компоновку документов. Вы можете добавлять аннотации, комментарии и другие интерактивные элементы в свои PDF-файлы.
4. React Icons
React Icon – это супер полезная библиотека, которая позволяет вам легко включать всевозможные высококачественные иконки в ваши проекты React. В неё сразу включено более 1000 иконок, так что вы практически гарантированно найдете то, что вам нужно. И самое приятное, что вы можете настроить внешний вид значков, изменив их размер и цвет.
Использовать значок React тоже очень просто. Он поставляется с простым API, который позволяет легко отображать значки в вашем коде. Вы также можете создавать пользовательские наборы значков или переопределять стили отдельных значков по умолчанию, если вам это необходимо.
Чтобы начать использование данной библиотеки, вам необходимо установить её внутри вашего проекта на React:
npm i react-icons
Вот небольшой пример использования функционала данной библиотеки:
import { FaBeer } from "react-icons/fa"; function Question() { return (
{" "} Lets go for a ?{" "}); }
5. Formik
Formik – это действительно удобная библиотека, которая позволяет очень просто создавать формы в React и работать с ними. Она практически автоматизирует этот процесс, так что вам почти не нужно будет беспокоиться о том, чтобы делать это самостоятельно. Библиотека очень интуитивно понятна в использовании и поставляется с кучей полезных функций.
Например, Formik позволяет провести валидацию кода, указав на все имеющиеся ошибки или недочёты в вашей форме.
С помощью библиотеки Formik можно легко настроить внешний вид формы. Её функционал позволяет сэкономить уйму вашего времени, если в вашем проекте присутствует множество форм.
Чтобы начать использование данной библиотеки, вам необходимо установить её внутри вашего проекта на React:
npm i formik
Вот небольшой пример использования функционала данной библиотеки:
import React from 'react'; import { Formik, Form, Field, ErrorMessage } from 'formik'; const Basic = () => (
Any place in your app! { const errors = {}; if (!values.email) { errors.email = 'Required'; } else if ( !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email) ) { errors.email = 'Invalid email address'; } return errors; }} onSubmit={(values, { setSubmitting }) => { setTimeout(() => { alert(JSON.stringify(values, null, 2)); setSubmitting(false); }, 400); }} > {({ isSubmitting }) => ( Submit )}); export default Basic;
6. Recharts
Recharts – это действительно мощная библиотека для построения диаграмм в React. Она очень проста в использовании и поставляется с множеством опций настройки, так что вы можете создать именно тот тип диаграммы, который вам нужен.
Одна из самых крутых особенностей Recharts заключается в том, что она построена поверх D3, которая является суперпопулярной библиотекой для работы с данными. Это указывает на быстроту и эффективность данной библиотеки. Вы можете использовать всевозможные расширенные функции, такие как шкалы, оси и манипулирование данными.
Recharts также поставляется с множеством готовых типов диаграмм, таких как столбчатые диаграммы, линейные диаграммы и круговые диаграммы. И если вам нужно что-то более конкретное, вы всегда можете создать свои собственные пользовательские диаграммы, используя Recharts API.
Чтобы начать использование данной библиотеки, вам необходимо установить её внутри вашего проекта на React:
npm i recharts
Вот небольшой пример использования функционала данной библиотеки:
import React, { PureComponent } from 'react'; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'; const data = [ { name: 'Page A', uv: 4000, pv: 2400, amt: 2400, }, { name: 'Page B', uv: 3000, pv: 1398, amt: 2210, }, { name: 'Page C', uv: 2000, pv: 9800, amt: 2290, }, { name: 'Page D', uv: 2780, pv: 3908, amt: 2000, }, { name: 'Page E', uv: 1890, pv: 4800, amt: 2181, }, { name: 'Page F', uv: 2390, pv: 3800, amt: 2500, }, { name: 'Page G', uv: 3490, pv: 4300, amt: 2100, }, ]; export default class Example extends PureComponent { static demoUrl = 'https://codesandbox.io/s/simple-line-chart-kec3v'; render() { return ( ); } }
7. Framer Motion
Framer Motion – это действительно классная библиотека, которая позволяет очень легко добавлять всевозможные анимации и переходы в ваши проекты React. Она интуитивно понятна в использовании и поставляется с кучей готовых анимационных функций, так что вы можете приступить к работе с ней прямо сейчас.
Одна из главных особенностей Framer Motion заключается в том, что она основана на популярной библиотеке анимации Motion, которая используется для создания всевозможных анимаций для Интернета.
Использовать Framer Motion очень просто. Она поставляется с простым API, который позволяет вам указать тип анимации, который вы хотите, а также любые необходимые вам параметры настройки.
Чтобы начать использование данной библиотеки, вам необходимо установить её внутри вашего проекта на React:
npm i framer-motion
Вот небольшой пример использования функционала данной библиотеки:
import { motion } from "framer-motion" export const MyComponent = ({ isVisible }) => ( )
В целом, Framer Motion – это фантастический инструмент для тех, кто хочет добавить анимацию в свои проекты React. Она постоянно обновляется, что является большим плюсом. Независимо от того, нужен ли вам простой эффект наведения курсора мыши или сложный переход страницы, Framer Motion поможет вам.
Надеюсь, данная статья оказалась полезной для вас!