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 }) => {} } |