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

📋 Настраиваемый хук React для проверки формы без лишних хлопот

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

В последние годы я имел дело с формами, будь то отправка одной формы или многоэтапная воронка.

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

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

  1. Не требуется внешних компонентов для переноса входных данных, что значительно уменьшило размер библиотеки обработчиков (5kb gzip).
  2. Поскольку это неконтролируемое, вам больше не нужно иметь onChange и устанавливать значение для ввода, начните использовать существующую разметку HTML.
  3. Если ссылка компонента зарегистрирована в хуке, вы можете легко получить доступ к ее ссылке при возникновении ошибки и привязке к определенному полю.
  4. Гораздо более простой API, потому что проверка происходит на уровне регистрации.
  5. Отлично подходит для производительности, так как изменение ввода больше не вызывает повторного рендеринга, посмотрите сравнение производительности здесь.
  6. Легкий доступ к состоянию формы, так как Hook хранит ссылки для каждого ввода. вы можете легко запросить их ценность.
  7. Поддержка встроенной проверки браузера ❤️.

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

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