React Form Management

React Form Management is used to handle the state to render only itself, preventing page lagging or freezing and validating user-inputted data. Demo

Features

• To manage the state to protect the UI lags.
• validation form (yup)

Installation

npm install react-form-management

yarn add react-form-management

QuickStart

import { FormProvider, Form, useFormManagement } from "react-form-management";
import * as yup from "yup";

const App = () => {
  const { onSubmit, onReset, form, errors, formProvider } = useFormManagement({
    defaultForm: {
      first_name: "",
      last_name: ""
    },
    schema: yup.object().shape({
      first_name: yup.string().required(),
      last_name: yup.string().required()
    })
  });

  const onClickSubmit = ({ form }) => {
    console.log("form", form);
  };

  return (
    <FormProvider formProvider={formProvider}>
      <Form
        name="first_name"
        render={({ formState, errorState }) => {
          return (
            <div>
              <input value={formState.value} onChange={formState.onChange} />
              {errorState.isError && errorState.errorMessage}
            </div>
          );
        }}
      />
      <Form
        name="last_name"
        render={({ formState, errorState }) => {
          return (
            <div>
              <input value={formState.value} onChange={formState.onChange} />
              {errorState.isError && errorState.errorMessage}
            </div>
          );
        }}
      />
      <button onClick={() => onSubmit(onClickSubmit)}>Submit</button>
      <button onClick={() => onReset({})}>Reset</button>
    </FormProvider>
  );
};
export default App;

API useFormManagement

Parameter	Type	Description
formProvider	object	To send the data to the formProvider.
form	object	Your form value
errors.	object	Form errors according to the schema you have declared.
onSubmit	function	Submit form
onReset	function	Reset Form
onChangeCustom	function	this function use for change other field value
observe	function	listen value when the value is changed
addItem	function	this function use for add new item in the case of an array
removeItem	function	this function use for remove item in the case of an array
removeAllItem	function	this function use for remove all item in the case of an array

Props useFormManagement

Parameter	Type	Description
defaultForm	object	Default form value
schema	yup	Schema for validate form error

Props FormProvider

Parameter	Type	Description
formProvider	object	Required

Props Form

Parameter	Type	Description	Method
name	string	Required Your field name
render	component	Required Your component input	render={ ({ formState, errorState, observe }) => {} } OR render={ ({ formState: { value, onChange, onChangeCustom }, errorState: { isError, errorMessage }, observe }) => {} }