react-form-build v1.0.7

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

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