dynamic-form-field-generator

• fields,onSubmit two are the props to pass the component

fields

• it array of object fields that has all the farm fields like below:

1. label
2. fieldType
3. fieldName
4. options (only for checkbox, select,radio)

Example

// src/App.tsx
import React from 'react';
import DynamicFarmForm from 'dynamic-form-field-generator';

const App: React.FC = () => {
  const farmFields = [
    { label: 'First Name', fieldType: 'text', fieldName: 'firstName' },
    { label: 'Last Name', fieldType: 'text', fieldName: 'lastName' },
    {
      label: 'Gender',
      fieldType: 'radio',
      fieldName: 'gender',
      options: ['Male', 'Female'],
    },
    {
      label: 'Crops',
      fieldType: 'checkbox',
      fieldName: 'crops',
      options: ['Wheat', 'Corn', 'Rice', 'Barley'],
    },
    {
      label: 'Country',
      fieldType: 'select',
      fieldName: 'country',
      options: ['USA', 'Canada', 'UK', 'Australia'],
    },
    { label: 'Email', fieldType: 'email', fieldName: 'email' },
    { label: 'Phone Number', fieldType: 'tel', fieldName: 'phoneNumber' },
    { label: 'Date of Birth', fieldType: 'date', fieldName: 'dateOfBirth' },
  ];

  const handleOnSubmit = (formData: Record<string, any>) => {
    console.log('Farm Created:', formData);
  };

  return (
    <div className="App">
      <h1 className="text-center">Create a Farm</h1>
      <DynamicForm fields={farmFields} onSubmit={handleOnSubmit} />
    </div>
  );
};

export default App;

Currently offering fieldType

• text
• password
• email
• tel
• date
• select
• radio
• checkbox