Библиотека проверки формы React, построенная под 3 КБ

TL;DR: Представляем новую библиотеку React Hook для более простого и чистого подхода к проверке формы (ИМХО).

Я имел дело с формами в течение последних лет, будь то отправка одной формы или воронка с несколькими шагами. В течение многих лет я имел опыт работы с такими библиотеками, как Redux-форма а также Муравьиный. Оба являются отличной библиотекой для того, что они предлагают.

Совсем недавно Реагировать 16.8 посадил нас с Крюк, что, на мой взгляд, является одной из лучших функций, реализованных командой React🌹 (спасибо, команда React). Поэтому я обнаружил новый подход к написанию проверки формы, потенциально более чистый подход. позвольте мне показать вам код 🔎

import React from 'react'
import useForm from 'react-hook-form'

function App() {
  const { register, handleSubmit, errors } = useForm() 
  const onSubmit = (data) => { console.log(data) } 
    
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="firstname" ref={register} /> // register input
        
      <input name="lastname" ref={register({ required: true })} /> // register as required field
      {errors.lastname && 'Last name is required.'} // display error message when last name is not valid

      <input name="age" ref={register({ pattern: /\d+/ })} />  // register as input with pattern
      {errors.age && 'Please enter number for age.'} // display error message when age is not valid

      <input type="submit" />
    </form>
  )
}

Как видно из приведенного выше примера, ни один компонент не был импортирован. Поэтому вместо того, чтобы иметь управляемый ввод/выбор над формой, этот подход неконтролируемый ввод формы и регистрация их ссылка в Форма хука реакции. Это позволяет хуку иметь полный контроль и понимание ваших элементов формы, и, следовательно, раскрывает множество других преимуществ:

• Не требуется никаких внешних компонентов для переноса входных данных, что сделало библиотеку ловушек намного меньше (3 КБ gzip)
• Поскольку это не контролируется, вам больше не требуется иметь onChange и устанавливать значение для вашего ввода, начните использовать существующую HTML-разметку.
• Если ссылка компонента зарегистрирована в хуке, вы можете легко получить доступ к этой ссылке при возникновении ошибки и привязать ее к определенному полю.
• Гораздо проще API, потому что проверка происходит на уровне реестра.
• Отлично подходит для производительности, так как изменение ввода больше не вызывает повторный рендеринг, посмотрите сравнение производительности. здесь.
• Простой доступ к состоянию формы, так как Hook хранит ссылки для каждого входа. вы можете легко запросить их значение.

Это мой обзор преимуществ по сравнению с использованием React Hook Form, я думаю, что с таким подходом все намного проще (ИМХО). Пожалуйста, проверьте веб-сайт для живая демонстрацияя также построил форму строитель который позволяет вам создавать формы и копировать/вставлять код в вашу среду или codeSandbox, чтобы протестировать их. Многие примеры также живут на Гитхаб страница.

Я действительно надеюсь, что это облегчит проверку формы, и не стесняйтесь оставлять мне вопросы или предложения по Гитхаб (пожалуйста, оставьте звезду, если вы найдете это полезным 🙏🏻). ❤️ Спасибо, что читаете.