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

Автор оригинала: Billy (罗贝尔).

TL; DR: введение новой библиотеки React Cloot для справиться с проверкой формы с более простым и более чистым подходом (IMHO).

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

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

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

function App() {
  const { register, handleSubmit, errors } = useForm() // initalise the hook
  const onSubmit = (data) => { console.log(data) } // submission when input are valid
    
  return (
    

       // register input
        
       // register as required field
      {errors.lastname && 'Last name is required.'} // display error message when last name is not valid

        // register as input with pattern
      {errors.age && 'Please enter number for age.'} // display error message when age is not valid

      
    
  )
}

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

• Никакие внешние компоненты не требуются для обертывания входных данных, которые сделали библиотеку крюка намного меньше (3KB GZIP)
• Поскольку он неконтролируемый, вам больше не требуется иметь Onchange и устанавливать значение вашему входу, начните использовать существующую HTML Markup.
• С Ref Component был зарегистрирован в крючок, вы можете легко получить доступ к его работе, когда произошла ошибка, а также анкеры к конкретному полю.
• Намного проще API, потому что валидация происходит на уровне регистра.
• Отлично подходит для производительности в качестве изменения ввода, которые больше не вызывают перезарядки, проверьте сравнение производительности здесь Отказ
• Простая форма доступа к состоянию, поскольку крючок удерживает Refs для каждого ввода. Вы можете легко запрашивать значение их.

Это мои резюме преимуществ по сравнению с использованием формы React Clooth, я думаю, что с таким подходом все намного проще (ИМХО). Пожалуйста, проверьте сайт для Живая демонстрация Я также построил форму строитель Что позволяет вам создавать форму и копировать код/вставить код в среду или кодовую обработку, чтобы проверить их. Многие примеры также живут на Github страница.

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