YL React Forms

Description

YL React forms is a basic form state management library built on top of mobx 6+. It is heavily based on formstate library. Form more information about the formstate library, please read the docs directly at https://formstate.github.io

Quickstart

Install required dependencies

  npm install @yl/react-forms 

Import api functions you wish to use into your files

import { YlForm, YlField } from '@yl/react-forms'

API

YlForm

YlForm acts very similar to FormState component from the formstate library.

Some of the notable differences:

• The onChange handler can be used normally (with lambda) or directly. It is pre-bound to the form and can process an event and extract the data directly.

• form.values property can be used to get a json object tree of all the validated values of the form. This is useful for creating JSON posts back to the server, or otherwise getting all the values from the current state of the form.

  Example:

  
  import { FC, useState } from 'react';
  import { YlForm, YlField } from '@yl/react-forms';
  import { observable } from 'mobx-react-lite';
  
  const FormExample: FC = observable(function FormExample() {
   const [myForm] = useState(
     new YlForm({
       firstName: new YlField(''),
       lastName: new YlField('')
     })
   )
  
   return (
     <form>
       <label>
         First Name:{' '}
         <input value={myForm.$.firstName.value} onChange={myForm.$.firstName.onChange} />
       </label>
       <label>
         Last Name: <input value={myForm.$.lastName.value} onChange={myForm.$.lastName.onChange} />
       </label>
       <h2>The Values currently on your form are:</h2>
       <pre>{JSON.stringify(myForm.values)}</pre>
     </form>
   )
   })

  You can also use the bindField() of the form or field to help automatically bind value and change handlers onto inputs:

  Example:

     <form>
       <label>
         First Name:{' '}
           <-- Bind using strongly typed fieldName on the form object -->
         <input {...myForm.bindField('firstName')}/>
       </label>
       <label>
         Last Name: 
           <!-- Bind directly using the bindField() method on the field object -->
         <input {...myForm.$.lastName.bindField()} />
       </label>
       <h2>The Values currently on your form are:</h2>
       <pre>{JSON.stringify(myForm.values)}</pre>
     </form>

submitIfValid

submitIfValid(callback : (form: YlForm<TField>)=>void)

Helper function to generate onSubmit handlers. The generated handler will do the following things:

1. Prevent default event handling on the form
2. Validate the form asynchronously and proceed only if form is valid
3. Call the passed in function with the form object

Example:

import { FC, useState } from 'react';
import { YlForm, YlField } from '@yl/react-forms';
import { useObserver } from 'mobx-react-lite';

const FormExample: FC = () => {
  const [myForm] = useState(
    new YlForm({
      firstName: new YlField(''),
      lastName: new YlField('')
     }));

 return useObserver(() => (
   <form onSubmit={form.submitIfValid( form => console.log('The values submitted were', form.values))}>
     <label>
       First Name: <input value={myForm.$.firstName.value} onChange={myForm.$.firstName.onChange} />
     </label>
     <label>
       Last Name: <input value={myForm.$.lastName.value} onChange={myForm.$.lastName.onChange} />
     </label>
     
     <button type="submit">Submit</button>
     
    </form>
  ));
};