search

uala / uala-react-forms

Official Form binding developed by UALA© frontend team.
https://uala.github.io/uala-react-forms
2 stars 1 forks source link

readme

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:

Travis npm package Coveralls

What we offer:

Table of contents

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:

{
  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.