react-form-build

       

Dynamic form creation module implemented using react. Can generate forms and interact with the generated from with view and edit modes. Layout generator has build in field element types and allows adding custom elements.

• Demo: Storybook
  
• NPM: react-form-build

Modes

Usage

npm i react-form-build

import { FormGenerator, FormStates } from 'react-form-build';
import 'react-form-build/dist/style.css';

const FormGenerator = () => {
  const [form, setFormLayout] = useState([]);
  const [value, setValue] = useState({});

  return (
    <div>
      <FormGenerator
        formState={FormStates.LAYOUT_EDIT}
        value={value}
        setValue={setValue}
        layout={form}
        setLayout={setFormLayout}
        allowDefaults
        customFieldTypes={[]}
      />
    </div>;
  )
}

Component Props

Prop	Type	Description
formState	string	State of the form component. This can be layout editable, form editable or form view. LAYOUT_EDIT | FORM_EDIT | FORM_VIEW
layout	array[]	Structure of the form. This is an array of arrays. Each array in the layout structure represent a row and the inner array has objects which has each column data. [[{}, {}], [{}, {}, {}]]
setLayout	func	Method to update the form structure when the form layout is updated. Takes the updated layout as the argument
allowDefaults	bool	To allow or to hide the inbuild field element types
customFieldTypes	array	List of custom elements. These elements will be available in the layout generation once added
value	object	Object with key value pairs which has the form data. Key: Field Id Value: Value
setValue	function	Method to update the form field values. Takes the updated field values object as the argument

Custom Field Element

Custom field elements can be passed to the component to be available in the form generation.
Sample Element: Number Input

Prop	Type	Description
type	string	Key to uniquely idenitify the element
displayName	string	Display name for the field
Control	React Component	Rendering logic for the field component
FieldPropertiesControl	React Component	Rendering logic for the field select view

Running Locally with Storybook

npm install
npm run storybook