Лучшие библиотеки React - формы, слайдеры и анимация

Чтобы упростить разработку приложений React, мы можем добавить несколько библиотек, которые упростят нам жизнь.

В этой статье мы рассмотрим некоторые популярные библиотеки для приложений React.

Formik

Чтобы упростить обработку форм, мы можем использовать библиотеку форм для обработки.

Formik - это одна из библиотек, которую мы можем использовать.

Для его установки запускаем:

npm i formik

Затем мы можем использовать его, написав:

import React from "react";
import { Formik } from "formik";
export default function App() {
  return (
    <div className="App">
      <Formik
        initialValues={{ email: "", name: "" }}
        validate={values => {
          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);
          }, 900);
        }}
      >
        {({
          values,
          errors,
          touched,
          handleChange,
          handleBlur,
          handleSubmit,
          isSubmitting
        }) => (
          <form onSubmit={handleSubmit}>
            <input
              type="email"
              name="email"
              placeholder="email"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.email}
            />
            {errors.email && touched.email && errors.email}
            <input
              type="name"
              name="name"
              placeholder="name"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.name}
            />
            {errors.name && touched.name && errors.name}
            <button type="submit" disabled={isSubmitting}>
              Submit
            </button>
          </form>
        )}
      </Formik>
    </div>
  );
}

Мы используем компонент Formik, который идет в комплекте.

Свойство initialValues имеет начальные значения для наших полей.

В опоре validate есть наша функция проверки.

Мы можем получить все values, проверить их и вернуть любые ошибки в объекте, если они есть.

Свойство onSubmit принимает обработчик отправки, который имеет введенные значения.

И тогда мы можем что-нибудь сделать с ними, чтобы отправить их.

Он запускается только в том случае, если все значения действительны.

Между тегами у нас есть функция с объектом со многими свойствами в качестве параметра.

values имеет значения.

errors имеет ошибки проверки формы.

touched указывает, какое поле затронуто.

handleChange имеет функцию обработчика изменения поля ввода.

handleBlur имеет обработчик для обработки полей формы, выходящих из фокуса.

isSubmitting имеет логическое значение, указывающее, отправлено ли оно.

Мы передаем их все в различные части формы.

handleChange, handleBlur и values передаются в поле формы.

errors находятся за пределами поля.

isSubmitting передается в кнопку, чтобы отключить ее при отправке.

rc-слайдер

Мы можем использовать пакет rc-slider, чтобы добавить компонент слайдера в наше приложение React.

Чтобы установить его, мы можем запустить:

npm i rc-slider

Затем мы можем использовать компоненты Slider и Range, чтобы добавить ползунок в наше приложение:

import React from "react";
import Slider, { Range } from "rc-slider";
import "rc-slider/assets/index.css";
export default function App() {
  return (
    <div className="App">
      <Slider />
      <Range />
    </div>
  );
}

Мы можем сделать его управляемым компонентом, добавив реквизиты value, onChange и onAfterChange:

import React from "react";
import Slider from "rc-slider";
import "rc-slider/assets/index.css";
export default function App() {
  const [value, setValue] = React.useState(0);
  const onSliderChange = value => {
    setValue(value);
  };
  const onAfterChange = value => {
    console.log(value);
  };
  return (
    <div className="App">
      <Slider
        value={value}
        onChange={onSliderChange}
        onAfterChange={onAfterChange}
      />
    </div>
  );
}

onChange обновит выбранное значение как значение состояния value.

value имеет выбранное значение.

Мы можем настроить шаги, отметки, стили ручки и многое другое.

rc-animate

Мы можем использовать rc-animate для анимации компонентов React.

Для его установки запускаем:

npm i rc-animate

Тогда мы можем написать:

import React from "react";
import Animate from "rc-animate";
const Div = props => {
  const { style, show, ...restProps } = props;
  const newStyle = { ...style, display: show ? "" : "none" };
  return <div {...restProps} style={newStyle} />;
};
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      enter: true
    };
  }
  toggle(field) {
    this.setState({
      [field]: !this.state[field]
    });
  }
  render() {
    const style = {
      width: "200px",
      height: "200px",
      backgroundColor: "red"
    };
    return (
      <div>
        <label>
          <input
            type="checkbox"
            onChange={this.toggle.bind(this, "enter")}
            checked={this.state.enter}
          />
          show
        </label>
        <br />
        <br />
        <Animate component="" showProp="show" transitionName="fade">
          <Div show={this.state.enter} style={style} />
        </Animate>
      </div>
    );
  }
}

использовать это.

Мы создаем компонент Div, чтобы получить стили других реквизитов.

Затем мы используем компонент Animate, чтобы добавить опору transitionName для добавления анимации затухания.

У нас также есть флажок для переключения div.

Заключение

Formik - полезный компонент для работы с формами.

rc-slider помогает нам легко добавить слайдер.

rc-animate позволяет нам добавлять анимацию в наше приложение React.