В этой статье я расскажу о четырех библиотеках, которые сделают вашу жизнь проще. По крайней мере, я на это надеюсь
1) Nanoid
Ссылка на github
Это маленькая библиотека, которая имеет всего одну функцию — генерация уникального id. Она может быть полезна в массе случаев, но самый, пожалуй, очевидный — keys для списков каких-либо элементов. Неоспоримые плюсы: простота и крошечный размер — 143 байта.
Использование максимально просто:
import nanoid from 'nanoid'
size = 8
id = nanoid(size) //cjF38yYc
Пример индексации списка:
import nanoid from 'nanoid'
import React from 'react'
const ListDrinks = props=>{
const drinks = ['rum','bear','vodka']
return(
<ul>
{drinks.map((values)=>{
return(
<li key={nanoid(8)}>{values}</li>
)
})}
</ul>
)
}
export default ListDrinks
2) Classnames
Ссылка на github
Эта библиотека для простого условного объединения имен классов. Пользоваться ей не намного сложнее, чем предыдущей библиотекой.
Пример простого использования:
import cn from 'classnames'
cn('menu','active')//'menu active'
let isActive = true
cn('menu',{'active':isActive})//'menu active'
isActive = false
cn('menu',{'active':isActive})//'menu'
Лично для меня эта библиотека является обязательной в любом React-приложении. Конечно, до того момента, пока я не найду более удобный инструмент.
3) Formik и Yup
Ссылка на github(Formik)
Ссылка на github(Yup)
В разговоре об упрощении чего-либо в React нельзя не упомянуть работу с формами. Наверное, каждый начинающий React-developer в один прекрасный момент понимал, как он ненавидит работу с формами. Когда приходит это понимание, стоит незамедлительно искать спасительную пилюлю.
Для меня этой пилюлей стали Formik и Yup.
Formik — библиотека, помогающая работать с формами. Она упрощает получение данных из формы, валидацию данных, вывод сообщений об ошибках и многое другое.
Yup — библиотека, которая является валидатором для модели, которую мы сами и создаем с помощью Yup.
Для сколько-нибудь полного описания этой связки нужна отдельная статья, но я попытаюсь показать с высоты птичьего полета, что они из себя представляют.
Код примера можно запустить тут: Пример
Первым делом создадим схему:
import * as Yup from "yup";
const BasicFormSchema = Yup.object().shape({
email: Yup.string()
//Проверяем, корректный ли адрес.
//Если нет, то выводится сообщение в скобках
.email("Invalid email address")
//не сабмитим, если поле не заполнено
.required("Required"),
username: Yup.string()
//минимальная длина - 2 символа
.min(2, "Must be longer than 2 characters")
//максимальная длина - 20 символов
.max(20, "Nice try, nobody has a first name that long")
.required("Required"),
password: Yup.string()
.min(8, "Must be longer than 8 characters")
.required("Required")
});
export default BasicFormSchema;
В коде выше мы определили схему, которая по сути — объект. Она имеет три поля: email, username и password. Каждому из полей мы определили некоторые проверки.
Одним из способов использования Formik является элемент <Formik/>, который имеет множество разных свойств, один из которых render.
import React from "react";
import { Formik, Field, Form } from "formik";
import BasicFormSchema from "./BasicFormSсhema";
const SignUp = () => (
<div className="container">
<h1>Sign up</h1>
<Formik
//инициализируем значения input-ов
initialValues={{
email: "",
username: "",
password: ""
}}
//подключаем схему валидации, которую описали выше
validationSchema={BasicFormSchema}
//определяем, что будет происходить при вызове onsubmit
onSubmit={values => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
}, 500);
}}
//свойство, где описывыем нашу форму
//errors-ошибки валидации формы
//touched-поля формы, которые мы "затронули",
//то есть, в которых что-то ввели
render={({ errors, touched }) => (
<Form className="form-container">
<label htmlFor="email">Email</label>
<Field
name="email"
placeholder="mtarasov777@gmail.com"
type="email"
/>
{//если в этом поле возникла ошибка и
//если это поле "затронуто, то выводим ошибку
errors.email &&
touched.email && <div className="field-error">{errors.email}</div>}
<label htmlFor="username">Username</label>
<Field name="username" placeholder="snapoak" type="text" />
{errors.username &&
touched.username && (
<div className="field-error">{errors.username}</div>
)}
<label htmlFor="password">Password</label>
<Field name="password" placeholder="123456qwe" type="password" />
{errors.password &&
touched.password && (
<div className="field-error">{errors.password}</div>
)}
<button type="submit">Submit</button>
</Form>
)}
/>
</div>
);
export default SignUp;
Код простой, я снабдил его комментариями, поэтому, думаю, вопросов возникнуть не должно.
Если же они возникли, то в ГитХаб репозитории имеется отличная документация, также можете задавать вопросы в комментариях.
Вот и конец. Я знаю, что есть много отличных библиотек, для работы с формами, какие-то кажутся вам лучшими, какие-то худшими. Я выразил тут личное мнение.
Надеюсь, что эта статья кому-нибудь может. Можете писать свои примеры полезных библиотек в комментарии, буду рад узнать что-то новое.
Автор: snapoak