@sajith-pj/react-former

Introduction

This package will helps you to deals with the forms in React JS. Its will helps you to create forms, validate the forms and to deal with the form submission. This package will take array and return the curresponding form

Usage

To auotmate the code or to reduce the efforts in the implimentation of forms in React JS.

Installation

npm install @sajith-pj/react-former

Once the package is installed, you can import the <Form/> using import:

import Form from "@sajith-pj/react-former"

Read From Here

An input will have three parts 1.Label(<Label>), 2.input(<input/>) and a wrapper 3.Div(<div>) which will wrap the input and label.

Keys	Usage
template	This will be an array of object and each object will contains the information about lable, input and teh container div
container	This is key included in the object of template array. This will used to define the properties of the container div like className, name,id etc.
label	This is key included in the object of template array. This will used to define the properties of the label tag like className, name,id etc.Here, One thing you should remember is the innerText of label is passed as text(Example will available in the example sections)
input	This is key included in the object of template array. This will used to define the properties of the input tag like className, name,id etc. Here, One thing you should remember is In case of radio input and checkbox you should pass a extra key "value"(Example will available in the example sections)
render	This is key included in the object of template array. This will used to used to render custom input fields or you can use this funcntion to render some extra information in between your form. This function will receive handleChange, touched, errors, and values. (Example will available in the example sections)
buttons	This key is used to specify the buttons that you want use in the form. This will be a object with keys items and containerClassName. The items will be an array of objects, each object will contains the properties of button items array would not be a empty array, one of the button should be a type of submit The containerClassName will helps you to style the parent div of buttons
validationSchema	This is an object to set your validation. We expect a Yup object for validation
submit	This is an object which helps you to deal with form submission.This object contains onBeforeSubmit: This function will run before the api call onAfterApiSuccess: This function will run after the api response is success onAfterApiFail: This function will run after the api fails body: This could be an array or an function that defines the body of the api request method:This key will help you to define the http method

Examples

A simple example will save your minutes

//  formConfig.js

   const let form = {
        // Each object of template array will generate
        // <div> => container object
        // <label>Example Label</label> => label object
        // <input type="text" name="example" id="example" /> => input object
        // </div>
         template: [
                    {
                        container: {
                            className: "",
                        },
                        label: {
                            text: "Username*", // innerText of label tag
                            className: "",
                        },
                        input: {
                            type: "text",
                            name: "username",
                            placeholder: "Enter Username",
                            className: "",
                        },
                    },
                    {
                        container: {
                            className: "",
                        },
                        label: {
                            text: "Password*",// innerText of label tag
                            className: "",
                        },
                        input: {
                            type: "password",
                            name: "password",
                            placeholder: "Password",
                            className: "",
                        },
                    },
                    {
                    render: () => ( // you can render function to render custim fields like this
                        <div className=" flex w-full justify-end mb-4">
                        <Link href="/forgot-password">
                            {" "}
                            <span className="text-white"> Forgot Password ? </span>
                        </Link>
                        </div>
                    ),
                    },
                ],
         buttons: {
                    containerClassName: "center",
                    // button will rendered inside a container div, containerClassName will assigned to the container div
                    items: [
                        // button object
                    {
                        type: "submit",
                        name: "submit",
                        id: "submit",
                        displayText: "Sign In", // innerText of button
                        className: "", // className for button
                    },
                    ],
                },
                validationSchema:{
                     username: Yup.string().required("Please enter the username"), // username is name of input type text
                     password: Yup.string().required("Please enter the password"),// password is name of input type  password
                },
            submit: {
                // if api is defined
                api: "/login",
                method: "POST",
                onBeforeSubmit:()=>{},
                onAfterApiSuccess:()=>{},
                onAfterApiFail:()=>{},
                // if body is a function
                body: ({ values }) => { // values is a object with input values
                    return { otp: `${values.password}${values.username}` };
                },
                // if body is array
                body: ["username", "password"],
            }
        }
export { form }

import * as Yup from "yup";
import Form, { config } from "react-former-package";
import config from "./axiosConfig";
import { form } from "./formConfig"

config(config);  //=> config function will expect a object with key axios, eg: { axios: axiosInstance }
const App = () => {

    return(
        <Form {...form}>
    )
}

Config

We are using axios to make api calls, so you can config the axios instance using this config function. Its is expected to be called in the entry point of your app (index.js in React JS).

// axiosConfig.js.
// you can seperate the axios config.
import axios from "axios";

// axios instance for making requests
const axiosInstance = axios.create();
// request interceptor for adding token
axiosInstance.interceptors.request.use((config) => {
  // add token to request headers
  config.baseURL = `https://your-base-url/api`;
  config.headers = Object.assign(
    {
      Authorization: `${localStorage.getItem("accessToken")}`,
    },
    config.headers
  );
  //   ... rest of your config.
  return config;
});

axiosInstance.interceptors.response.use(
  (response) => {
    return response;
  },
  (err) => {
    return Promise.reject(err);
  }
);

const config = { axios: axiosInstance };
export default config;

import React from "react";
import Form, { config } from "react-former-package";
import { form } from "./formConfig"
import config from "./axiosConfig";

config(config); //=> config function will expect a object with key axios, eg: { axios: axiosInstance }
function App() {
  return (
    <div className="App">
      <Form {...form} />
    </div>
  );
}

export default App;