10 библиотек форм React для вашего унаследованного кода и немного ностальгии
Библиотеки форм - отличный способ избежать переписывания утомительного и скучного кода, наслаждаясь (чаще всего) лучшим кодом, чем тот, который мы, вероятно, поставили бы (не из-за наших навыков кодирования, а потому, что у нас, вероятно, не будет времени или мотивации для получился отличный от).
Сказав это, вам может не повезти и вы обнаружите, что сделали ставку на «неправильную лошадь» - ваша библиотека пользовательского интерфейса больше не поддерживается.
Кстати, при создании библиотеки компонентов рекомендуется использовать Bit. Он позволяет использовать независимые компоненты из любого проекта, вашего или стороннего, а также упрощает управление и обновление компонентов в приложениях.
Когда у вашей команды есть многоразовая система пользовательского интерфейса в облаке компонентов, вы можете быстрее вместе создавать приложения и упростить сохранение согласованного пользовательского интерфейса.
1. React-Formal
React-Formal используется для проверки и сериализации HTML-форм. Он позволяет создавать формы без стандартного кода и разметки форм. Он также предлагает систему проверки схемы по сравнению с традиционным подходом проверки состояния DOM.
React-Formal:
- Предоставляет формы как с контролируемыми, так и с неконтролируемыми компонентами и отделяет управление от состояния DOM.
- Работает с объектами JavaScript.
- Позволяет повторно использовать логику синтаксического анализа и проверки модели.
Как установить
React-формальный использует построитель схемы JavaScript yup для синтаксического анализа и проверки значений. Установите React-financial и Yup с помощью следующих команд:
Мы также установим библиотеку реакции-формальных входов, которая предоставляет надежные типы ввода, такие как средства выбора даты и числа, поля множественного выбора и поля со списком.
Затем определите схему объекта. Forms предоставит ввод в схему, созданную Yup. Ниже приведен пример простой формы.
Он также помогает в создании вложенных форм и поддерживает такие поля, как сообщение и сводка.
2. Реактивные формы
React-forms предоставляет механизм отрисовки и проверки форм React. Это упрощает реализацию компонентов формы.
Как установить
Чтобы использовать последнюю версию react-forms, установите ее следующим образом:
React-forms распространяется как модуль CommonJS и требует Browserify или Webpack для связывания зависимостей.
Как использовать
Создав форму, вы можете управлять значениями ее полей как частью состояния локального компонента:
Давайте воспользуемся компонентом response-form для создания значений:
Чтобы проверить значения формы с помощью схемы JSON, вы должны передать ее в createValue ():
Чтобы настроить React-формы, установите react-stylesheet следующим образом:
3. ValueLink
ValueLink является легким (уменьшено до 6,5 КБ) и работает как с JS, так и с TypeScript. Он предоставляет решения обратного вызова для сложных форм вместе с проверкой ввода. Это делает состояние React идеальным контейнером состояния.
Модульность React и читаемость кода улучшены с помощью NestedLink. Объект ссылки - это ссылка на состояние компонента. ValueLink инкапсулирует значение компонента, обновляет его, проверяет и при необходимости выдает сообщение об ошибке. Он выполняет преобразования, подобные $ link.props.
Как установить
Чтобы использовать NestedLink с React, установите его следующим образом:
Nestedlink не требует никаких других зависимостей.
Как использовать
Вы можете импортировать useLink или valueLink и использовать их с React Hooks или компонентами React:
Создав подкласс React.Component, вы можете использовать link.value для создания привязки к настраиваемому контейнеру состояния.
4. Формы размаха крыльев.
Wingspan-forms создает абстракцию для динамических форм и сеток. Она известна как библиотека динамических форм. KendUI поддерживает его виджеты, поэтому вам понадобится лицензионная версия KendUI.
React - это библиотека управления DOM, а состояния виджетов хранятся на центральном уровне управления JavaScript. Состояния виджетов контролируются переданной ему логикой. Центральное расположение может обрабатывать всю бизнес-логику, которая отделена от виджета.
Виджеты в формах размаха крыльев используют «значение / изменение» в качестве интерфейса для получения значения и обратных вызовов, которые вызываются при выполнении запроса на изменение.
Как установить
Установите wingspan-forms с помощью npm и запустите его с помощью grunt с помощью следующих команд:
Как использовать
Следующий код показывает, как можно создать форму с полями имени, фамилии, пола и возраста с помощью Wingspan-forms:
5. NewForms
NewForms - это изоморфная библиотека обработки форм для React. Ранее он назывался Django.forms.
NewForms определяет новые объекты формы вместо работы с виджетами. Его можно обслуживать на стороне клиента, объединяя его, или можно развернуть на стороне сервера.
Как использовать
Вы можете установить его через npm следующим образом:
Затем вы можете использовать его с require.
NewForms по умолчанию запускается в режиме разработки. Его можно установить в производственный режим, установив для переменной среды NODE_ENV значение «production».
Вы можете расширить новую форму с помощью Form.extend () следующим образом:
Форма состоит из полей для ввода данных. Это могут быть поля или группы полей, которые отображаются пользователю. Каждое поле содержит виджет, который можно настроить и переопределить.
Визуализируйте форму следующим образом:
6. Formjs
FormJS работает с HTML путем создания форм с использованием данных схемы JSON. Он сопоставляет объекты с массивами с помощью Underscore.js и предоставляет такие элементы формы, как поля ввода, поля выбора, загрузку файлов, переключатели и флажки.
Как установить
Включите эти файлы в заголовок:
Теперь включите form.js в тело вашей страницы:
Как использовать
Чтобы настроить form.js, создайте переменную с именем JSON, как описано в приведенном ниже коде:
FormJS использует цикл для визуализации нескольких форм и добавления их в схему. Ненужные обратные вызовы и циклы можно удалить.
FormJS также предоставляет вам опции для функций обратного вызова.
7. React-form-builder
React-form-builder дает компонентам базовое поведение формы и постоянство. Это делается с помощью FormHandlerMixin. К компонентам добавляются свойства, которые можно установить по умолчанию или переопределить.
Как установить
Чтобы установить или опробовать примеры, вы можете клонировать репозиторий git с помощью следующей команды:
Для сборки и выпуска используйте следующие команды:
Затем вы можете открыть сервер на http: // localhost: 8080 / webpack-dev-server /
Как использовать
Чтобы создать форму, вы создаете экземпляр FormHandlerMixin. Вы можете установить «getDefaultProps» или передать его родительскому компоненту. После отображения формы вы можете отправить ее с помощью onSubmit.
Ниже приведен пример использования React-form-builder:
Вы можете отправить форму следующим образом:
8. сплетение-форма
plexus-form - это компонент динамической формы, который использует формат спецификации, основанный на схеме JSON. Создайте форму с помощью схемы и проверьте вводимые данные с помощью подключаемого валидатора.
Это пример создания формы с использованием схемы и валидаторов:
Есть разница между plexus-form и схемой JSON-формы. Plexus-form расширяет спецификацию схемы JSON для использования x-подсказок и x-упорядочения. Порядок элементов по умолчанию определяется x-порядком, в то время как x-подсказки используются для аннотирования схемы подсказками. plexus-form также позволяет связывать определяемые пользователем обработчики ввода.
Вы можете посмотреть более подробную демонстрацию plexus-форм на http://appliedmat Mathematicsanu.github.io/plexus-form/.
9. tcomb-form
tcomb-form определяет модели DOM в JS. Он имеет библиотеку проверки времени для проверки функций для моделей домена tcomb.
С помощью tcomb-форм:
- Вы пишете меньше кода.
- Доступность и удобство использования бесплатны, поскольку по умолчанию он автоматически маркирует и выполняет встроенную проверку.
- Если модель предметной области изменяется, форму обновлять не нужно.
- Вы можете переопределить автоматические функции и добавить в формы дополнительную информацию.
Как установить
Установите путем клонирования библиотеки tcomb из github или с помощью npm:
Как использовать
Следующий код показывает использование tcomb-форм:
Этот код генерирует следующую форму с автоматически созданными метками:
Вы можете найти демонстрации tcomb-формы по адресу https://gcanti.github.io/resources/tcomb-form/playground/playground.html
10. форми-реакция
Формы React сложно проверить, особенно когда у вас есть несколько форм с несколькими проверками в каждой. Formsy-react разработан как конструктор форм вместе с входными данными и проверками, необходимыми для форм.
Поскольку проверки в проектах React выполняются по-разному, Formy-React предоставляет компоненты, которые являются гибкими и пригодными для повторного использования. Вот основные особенности Formy-React:
- Создавайте любые элементы формы без ограничения традиционными типами ввода. Formy-react предоставит подтверждения.
- Управляйте проверками с помощью простого синтаксиса.
- Имейте отдельные обработчики для каждого состояния (onSubmit, onValid и т. Д.) Ваших форм.
- Анализируйте внешние проверки, такие как ответы сервера, на недействительность входных данных.
- Динамически добавляйте элементы формы и позволяйте им автоматически регистрировать / отменять регистрацию.
Как установить
Вы можете использовать webpack, browserify после использования yarn для установки Formy-react:
Formy-react предоставляет следующие пакеты компонентов:
- Чтобы установить компоненты начальной загрузки для формы Formy-React: twisty / Formy-React-components
- Обертки Formsy-React для компонентов формы Semantic-Ui-React zabute / formsy-semantic-ui-react
Как использовать
В приведенном ниже коде показан процесс создания формных компонентов:
После экспорта элемента вы можете использовать его в следующей форме:
Заключение
Мы рассмотрели множество различных библиотек, которые можно использовать для создания форм и элементов для React. Они предлагают различные подходы, в которых некоторые из них работают напрямую с DOM и поддерживают как контролируемые, так и неконтролируемые компоненты.
Важно изучить возможности каждой библиотеки и выбрать ту, которая больше всего подходит для ваших нужд.
