react-dynoform
TypeScript icon, indicating that this package has built-in type declarations

2.1.3 โ€ข Public โ€ข Published

๐Ÿงฉ DynamicForm โ€“ JSON-based Dynamic Form Builder for React

A flexible and extensible form-rendering React component powered by a JSON configuration. Built with TypeScript and Material UI, it supports nested fields, conditional rendering, and dynamic data loading.

โš™๏ธ Built with React, TypeScript, and MUI (v5)
๐Ÿ“ฆ Ideal for internal tools, admin panels, and dashboards


๐Ÿ“ฆ Installation

npm install react-dynoform
# or
yarn add react-dynoform

๐Ÿš€ Usage

import React from 'react';
import DynamicForm, { FormField } from 'react-dynoform';

const formFields: FormField[] = [
  {
    key: 'name',
    label: 'Name',
    type: 'text',
    required: true,
  },
  {
    key: 'subscribe',
    label: 'Subscribe to newsletter',
    type: 'checkbox',
  },
  {
    key: 'dob',
    label: 'Date of Birth',
    type: 'date',
  },
  {
    key: 'gender',
    label: 'Gender',
    type: 'radio',
    options: [
      { label: 'Male', value: 'male' },
      { label: 'Female', value: 'female' },
    ],
  },
];

export default function App() {
  return (
    <DynamicForm
      fields={formFields}
      onSubmit={(data) => console.log('Submitted:', data)}
    />
  );
}

๐Ÿ›  Features

  • โœ… Supports text, select, checkbox, radio, date, array, hidden
  • ๐Ÿ“š Nested forms (type: 'array') with collapsible sections
  • โšก Dynamic select options from API (loadOptionsApi)
  • ๐ŸŽฏ Conditional rendering via dependsOn and showIf
  • ๐Ÿ”„ Bi-directional data mapping (mapTo, mapFrom, doNotMap)
  • ๐Ÿ” Full support for validation and controlled components
  • ๐Ÿงช Type-safe props with TypeScript

๐Ÿ“˜ FormField Schema

interface FormField {
  key: string;
  label: string;
  type?: "text" | "checkbox" | "radio" | "select" | "hidden" | "date" | "array";
  nestedFields?: FormField[];
  options?: { label: string; value: string }[] | ((formData: Record<string, any>) => { label: string; value: string }[]);
  defaultValue?: any;
  disabled?: boolean;
  required?: boolean;
  dependsOn?: string;
  showIf?: string; // "*" for any value, or comma-separated values
  mapTo?: string;
  doNotMap?: boolean;
  mapFrom?: string;
  valueType?: "string" | "number" | "boolean" | "date" | "json" | "jsonString" | "array";
}

๐Ÿ“ค Props

Prop Type Description
fields FormField[] Configuration array
disabled? boolean Disables all inputs
selectedValues? Record<string, any> Pre-filled values
submitButtonLabel? string Custom submit label
hideSubmit? boolean Hide the submit button
onChange? (data: Record<string, any>) => void Called on any change
onSubmit? (data: Record<string, any>) => void Called on submit
onRemove? (data: Record<string, any>) => void Called when delete is clicked

๐Ÿงฉ Supported Field Types

  • text: Single-line text input
  • checkbox: Boolean checkbox
  • radio: Select one from multiple options
  • select: Dropdown with options or async API loading
  • date: MUI-compatible date picker
  • hidden: Hidden input for internal values
  • array: Nested and repeatable field sets

๐Ÿ” Conditional Display Logic

You can make fields appear based on another field's value using:

  • dependsOn: key of the controlling field
  • showIf: comma-separated list of values to match (* = any value)

Example:

{
  key: "state",
  label: "State",
  type: "text",
  dependsOn: "country",
  showIf: "USA,Canada"
}

๐Ÿงช Development

Clone locally:

git clone https://github.com/your-org/dynafield.git
cd dynafield
npm install

Build for production:

npm run build

๐Ÿ“œ License

MIT ยฉ 2025 Prashanth Molakala

Package Sidebar

Install

npm i react-dynoform

Weekly Downloads

18

Version

2.1.3

License

MIT

Unpacked Size

36.4 kB

Total Files

7

Last publish

Collaborators

  • prashanth0926