React-form-management NPM

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