common-form-react-js

NPM DYNAMIC FULLY CUSTOMISED FORM FOR COMMON USE

Use this form for create common form for your website.

Demo

View Online Demo

https://djangir.github.io/commonForm/

Features :-

• create Form For common Use.
• show Custom Html in form
• customize errors and show Erros or messages.
• customize full form .
• show custom html in form.
• manage local state data in only one state.
• reduce & optmize your code

Example

import { useState } from 'react';
import InputForm from "common-form-react-js";

function App() {
  const [dataObject, setDataObject] = useState({});

  const customFieldsData = () => {
    return (
      <>
        <input
          onChange={(e) => {
            dataObject.custom = e.target.value;
            setDataObject({ ...dataObject });
          }}
          type="radio"
          name="fav_language"
          value="HTML"
        />
        <label for="html">HTML</label>
        <br />
        <input
          onChange={(e) => {
            dataObject.custom = e.target.value;
            setDataObject({ ...dataObject });
          }}
          type="radio"
          name="fav_language"
          value="CSS"
        />
        <label for="css">CSS</label>
        <br />
        <input
          onChange={(e) => {
            dataObject.custom = e.target.value;
            setDataObject({ ...dataObject });
          }}
          type="radio"
          name="fav_language"
          value="JavaScript"
        />
        <label for="javascript">JavaScript</label>
      </>
    );
  };

  const fieldsData = [
    {
      type: 'text',
      label: 'text',
      onChange: (e) => {
        dataObject.title = e.target.value;
        setDataObject({ ...dataObject });
      },
      value: dataObject.title,
      inputtype: 'input',
      error: 'Error msg',
      placeholder: 'input',
      required: true,
      hideDefaultErr: true,
    },
    {
      label: 'textarea',
      error: 'Error msg',
      onChange: (e) => {
        dataObject.discription = e.target.value;
        setDataObject({ ...dataObject });
      },
      value: dataObject.discription,
      inputtype: 'textarea',
      rows: 5,
      placeholder: 'textarea',
    },
    {
      label: 'dropdown',
      onChange: (e) => {
        dataObject.select = e.target.value;
        setDataObject({ ...dataObject });
      },
      value: dataObject.select,
      inputtype: 'dropdown',
      placeholder: 'dropDown',
      required: true,
      data: [
        {
          id: 1,
          title: 'test',
        },
        {
          id: 2,
          title: 'test2',
        },
      ],
      showkey: 'title',
      setkey: 'id',
    },

    { customHtml: customFieldsData },

    {
      value: 'button',
      title: 'button',

      onClick: () => {
        console.log(dataObject);
      },
      inputtype: 'button',
    },
  ];

  return (
    <div>
      <InputForm fieldsData={fieldsData} />
    </div>
  );
}

export default App;

Props

Title	Default	Require	Accept	Options
fieldsData	null	Reuqired	Object

Json Props

in json you can provide any prop and use it.

Title	Default	Require	Accept	Options
customHtml		no	function
inputtype	input	No	string	button, textarea, dropdown
label		No	string
error		No	string