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

CB React Forms - это библиотека React, которая дает пользователям возможность создавать формы с помощью интуитивно понятного интерфейса перетаскивания. В библиотеке два модуля:

  • Конструктор форм
  • Генератор форм

Компонент Form-Builder поддерживает ряд полей формы и некоторые теги HTML. Просто выберите поля, которые хотите добавить, и перетащите их в форму. Выйдите за рамки простой формы контакта или заказа и создайте плавные рабочие процессы, которые можно использовать в любом отделе вашей организации. Используйте онлайн-опросы, чтобы собрать мнения клиентов, создать форму регистрации на мероприятие для вашей следующей конференции или найти идеального нового сотрудника с помощью формы заявления о приеме на работу. Возможности безграничны.

Form-Generator - это дополнительный компонент к Form-Builder, который позволяет отображать результаты созданной формы. Form-Generator предназначен для автоматического создания формы React на основе данных JSON, отправленных Form-Builder. Типичный вариант использования - это Form-Builder в области администрирования сайта или приложения и Form-Generator во внешнем интерфейсе.

Конструктор форм

Возможности:

  • Настройка - включайте только нужные поля, используйте собственные значки и имена полей.
  • Режим Live Preview для немедленной проверки вашего результата.
  • Выберите поля, которые вам нужны, и перетащите их в форму.
  • Эта библиотека отображает поля формы с использованием семантики Bootstrap. Это означает, что ваши формы по умолчанию будут красивыми.

Легко собирайте данные с помощью этих гибких типов полей:

  • Поле ввода текста
  • Числовое поле
  • Поле короткого ответа
  • Поле для длинного ответа
  • Раскрывающееся поле
  • Поле кнопки радиона
  • Поле флажка
  • Поле тегов
  • Поле звездных рейтингов
  • Поле диапазона ползунка
  • Поле URL
  • …еще не все.

Установка:

CB React Forms доступен через npm / yarn.

$ npm install --save cb-react-forms
or
$ yarn add cb-react-forms

После того, как вы установили модуль, включите его в свой проект.

import { FormBuilder } from ‘cb-react-forms’;

Использование:

С помощью интуитивно понятного пользовательского интерфейса перетаскивания создайте форму с компонентом Form-Builder, используйте редактор для редактирования каждого поля, отметьте обязательные поля флажком «Обязательно», проверьте предварительный просмотр в реальном времени, чтобы убедиться, что это именно то, что вам нужно, затем экспортируйте код JSON созданной формы и примените к своему приложению с помощью компонента Form-Generator.

В документации выберите список доступных полей формы.

Отправка формы:

Вы можете передать функцию в качестве опоры onSubmit компоненту Form-Builder для прослушивания, когда форма будет отправлена. Ему будет передан массив JSON со списком выбранных вами полей формы.

const onSubmit = (formData) => console.log(formData);

Генератор форм

Компонент Form-Generator предназначен для автоматического создания формы React на основе данных JSON, отправленных компонентом Form-Builder.

Возможности:

  • Визуализируйте формы, просто импортировав компонент FormGenerator и передав JSON formData в качестве опоры.
  • Базовая поддержка валидаций из коробки.
  • Просмотрите предварительно заполненные поля формы, предоставив данные ответа JSON.
  • Поддерживает режим только для чтения, в котором форму можно просматривать в формате, в котором все поля формы отключены.

Использование:

Используйте компонент Form-Generator в своем приложении или на веб-сайте и предоставьте JSON formData в качестве опоры для получения окончательной формы. Предоставьте функцию onSubmit, которая определяет, что делать с ответами формы, отправленными пользователем.

Зависимости:

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

  • редукционная форма
  • draft-js
  • реагировать-черновик-wysiwyg
  • реагировать
  • реагировать-звезды-рейтинги
  • реагировать-выбрать

Ссылки: