Вы когда нибудь считали, сколько форм вы делаете во время разработки веб-приложения? И я не говорю о сложных формах вроде кастомного date-picker'а или же чего-то сложнее, а простых форм с тремя input, двумя select и одним textarea?

Я не считал. Но когда я начал писать очередное приложение на React и мне за один вечер пришлось создать 5 разных форм — мне поплохело. Ну, а когда разработчику плохеет — разработчик пишет велосипед!

Из таких вот соображений на свет появилась пока еще сырая, но уже используемая мной в двух разных проектах, библиотека для создания простейших форм на React. И я даже выделю слово простейших, потому как моя поделка даже близко не стоит рядом с такими проектами как React Forms или же Formsy-React.

Вместо картинки для привлечения внимания — количество однотипного кода, который нам всем приходится писать ради создания простейшей формы с одним полем.

Постановка задачи

После некоторого размышления я осознал, что хочу иметь под рукой React-компонет, готовый:

• Рендерить форму состоящую из простейших элементов (input, select, textarea) каждый из которых легко настраивается (placeholder, default value, type для input, и так далее)...
• … и имеющую одну лишь кнопку Submit, текст и поведение которой настраивается...
• … не имеющую готовых стилей, но способную принимать классы к своим элементам.
• Автоматически собирать данные из самой формы в плоский JSON объект с заданными ключами.
• Иметь простейший механизм валидации полей в форме.
• Показывать ошибки, связанные как с каким-то конкретным полем формы, так и общую ошибку для всей формы.

Также через некоторое время добавилось еще одно требование:

• Каким либо образом описание формы (но не сам рендеринг) должен быть идентичным для React и React Native.

Последние требование появилось после решения пилить проект на React-native. Очень уж не хотелось переписывать все формы по второму разу.

Решение

Вариантом, который в данный момент меня устраивает почти по всем пунктам стал mgr-form-react. Что-то там ещё не доработано, что-то забыто, но всё настолько просто, что может быть добавлено очень быстро и безболезненно. Но давайте пройдемся по главным идеям.

Сразу пример простейшей формы из документации на GitHub:

import Form from "mgr-form-react";
export default TestComponent = () => {
  // Описание полей формы
  const controls = [
    {
      element: 'input', // тип поля. Может быть input, select, textarea
      id: 'Signup.Client.Form.Control.Name', // id DOM-елемента самого control'а
      label: 'Client name', //текст показаный на лэйбле рядом с полем
      type: 'text' // тип input'а
    }, {
      element: 'select',
      id: 'Signup.Client.Form.Control.Language',
      label: 'Client language',
      options: ['en', 'fr', 'it', 'de', 'ru', 'es'] // список возможных значений для select'а
    }
  ];

  // Описание поведения и текста кнопки в форме
  const submit = {
    text: 'Submit button text',
    cb: (data) => {
      console.log(data);
    }
  };

  // Флаг говорящий является ли форма активной
  const editable = true;

  return <Form controls={controls}
               submit={submit}
               editable={editable} />;
}

Вот собственно и все. По количеству кода короче, конечно, не стало, но мне приятней разделять содержание формы (то есть поля, которые присутствуют в форме) от того, как форма рендерится.

Сейчас готовится такой же компонент для React-native. Плюс формат описания формы в виде JSON-документа я вижу в том, что он может быть определен на сервере и считываться клиетном. Таким образом нам не нужно будет ждать 2 недели в среднем пока клиенты обновят свое приложение, чтобы запретить им, допустим, оставлять фидбэк без электронного адреса для связи.

Пока что количество настраиваемых параметров формы не очень велико, но в планах есть добавление различных функций, как например определение поведения onInput, onChange, onFocus, onBlur для полей формы, добавление кнопок, регистрация собственных типов полей (то есть если вам нужно использовать что-либо более сложное чем input, select или textarea, должна быть возможность зарегистрировать ваш компонент и использовать его в описании формы) и так далее. Ну и, конечно же, проект открыт для пул-реквестов.

import Form from 'mgr-form-react';
export default TestComponent = () => {
  const controls = [
    {
      element: 'input',
      id: 'Signup.Client.Form.Control.Name',
      label: 'Client name',
      placeholder: 'Client name',
      default: 'Default name value',
      type: 'text',
      data: 'name', // аргумент фунции cb в параметра submit для компонента формы будет иметь поле с ключом "name" и значением данного поля формы
      validator: /^[A-Za-z0-9\s]{3,30}$/, // регулярное выражения для валидации значения поля
      formatError: 'Wrong name format', // Ошибка, показанная в случае, когда значение поля не проходит вадидацию
      class: 'custom-input-class' // css-класс который будет добавлен к данному полю формы
    }, {
      element: 'select',
      id: 'Signup.Client.Form.Control.Language',
      label: 'Client language',
      options: ['en', 'fr', 'it', 'de', 'ru', 'es'],
      default: 'en',
      data: 'language',
      class: 'custom-select-class'
    }
  ];

  const submit = {
    text: 'Submit button text',
    cb: (data) => {
      console.log(data); // { name: "Default name value", language: "en" } в случае дефолтных значений каждого из полей
    }
  };

  const errors = {
    'Signup.Client.Form.Control.Name': 'Name field error that is generated by someone outside of the form (e.g. server response error)', // будет показано рядом с полем имеющим id  'Signup.Client.Form.Control.Name'.
    general: 'A general error that will be shown under the form itself' // будет показано в отдельном div'е
  };

  const editable = true;

  return <Form controls={controls}
               submit={submit}
               errors={errors}
               editable={editable} />;
}

Стили

Как было сказано выше, мне требовался компонент, генерирующий формы без стилей. Таким образом, стили добавляются уже независимо от того, каким образом была создана форма — используя mgr-form-react или же каким-либо другим способом.
Структура классов в сгенерируемой форме будет следующей:

• mgrform-form — класс обертка для всей формы
• mgrform-control — класс — обертка для каждого поля формы.
• mgrform-has-error — класс, добавляющийся к mgrform-control в случае наличия ошибки для данного поля (либо ошибки валидации, либо ошибки из параметров компонента)
• mgrform-submit-btn — класс кнопки формы
• mgrform-error — класс div элемента, показывающего глобальную ошибку формы.
• к элементам с классами mgrform-control и mgrform-submit-btn добавляются классы, заданные в свойствах class объектов описания поля формы (объекта в массиве controls) и объекта submit.

Заключение

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

Само собой я открыт для критики, и разумеется буду рад, если кому нибудь данная поделка сохранит 5-10 минут рабочего времени, которые можно будет потратить на еще одну чашку кофе.

P.S. я не особо гуглил существующие решения похожего типа, буду рад, если кто-нибудь укажет мне на них. Спасибо