Uala React Forms

Official Form binding developed by UALA© frontend team.

Highly flexible and easy to use.

Don't speak english? Try out our README in a different language:

• Italiano :it:

What we offer:

• ready-to-use inputs validators + custom validators' setup
• pluggable components for a complete UI customization
• clean code style in components that uses @uala/react-forms

Table of contents

• Installation
• Usage
• API
  • connectForm();
  • connectFormElement();
• Issues

Installation

Using npm:

$ npm install --save @uala/react-forms

Usage

import React from 'react';
import { connectForm, connectFormElement } from '@uala/react-forms';

// import a schema validator
import yupSchema from './schema/yupSchema';

// write your components
const FormComponent = ({ emitSubmit, children }) => <form onSubmit={emitSubmit}>{children}</form>;

const FieldComponent = ({ emitChange, name }) => (
  <input name={name} type="text" onChange={e => emitChange(name, e.target.value)} />
);

// wrap components in @uala/react-forms HOC
const Form = connectForm({ schema: yupSchema, validationMode: 'onchange' })(FormComponent);

const Field = connectFormElement(FieldComponent);

// render
<Form
  onSubmit={({ values }) => {
    /** values validated, do something... */
  }}
>
  <Field name="first_name" />
  <Field name="last_name" />
</Form>;

API

This section list all the APIs available and possible use case scenarios.

connectForm()

The connectForm() function connects the React component you want to use as form wrapper to the form state.

It's also responsible to pass the onSubmit(), onChange() and onDidChange() listeners to your component, as well as emitSubmit(), emitChange() and emitDidChange() event emitters.

connectForm() Parameters

connectForm() accept one parameter, which is a configuration object and it's optional. By convention, the parameter is called options, described as shown below:

• options?: Object;

{
  schema?: Object,
  schemaVendor?: string,
  validationMode?: string,
  statePropagation?: boolean
}

options?: Object

|Parameter|Type|Default Value|Description| |----|----|----|----| |schema|Object|null|The validation schema used to validate your form. Default values are used during form initialization.| |schemaVendor|string|'yup'|The name of the schema vendor, (e.g. 'yup', 'joi')| |validationMode|string|'onsubmit'|Define when the form is validated. Allowed values are 'onsubmit','ondidchanged','onchange'| |statePropagation|boolean|false|Enable the form state propagation, allowing children to access the parent state.|

connectFormElement()

connectFormElement() accept one argument, which is mandatory and it's the component you want to wire. Here's the list of the injected props:

{
  values: Object,
  errors: Object,
  focusedInputKey: string,
  onFocus: Function,
  onChange: Function,
  onBlur: Function,
  onDidChanged: Function,
  onSubmit: Function,
  emitEvent: Function,
  formState: string
}

Issues

If you find a bug, please file an issue on our issue tracker on GitHub.