Next Dynamic Forms

A modern, configuration-driven dynamic form system for React and Next.js applications.

Features

🚀 Zero Configuration - Get started with simple JSON configurations
🎯 Framework Agnostic - Works with any React framework
🌍 I18n Support - Built-in internationalization with next-intl
🎨 Custom Styling - Fully customizable UI components
🔧 TypeScript First - Full TypeScript support with strict types
📱 Responsive - Mobile-first responsive design
⚡ Performance - Optimized for modern web applications

Quick Start

Installation

npm install @benyue1978/next-dynamic-forms

Basic Usage

import React, { useState } from 'react'
import { DynamicForm } from '@benyue1978/next-dynamic-forms/core'
 
// Define your UI components
const uiComponents = {
  Input: ({ value, onChange, ...props }) => (
    <input
      value={value}
      onChange={(e) => onChange(e.target.value)}
      className="w-full px-3 py-2 border border-gray-300 rounded-md"
      {...props}
    />
  ),
  Textarea: ({ value, onChange, ...props }) => (
    <textarea
      value={value}
      onChange={(e) => onChange(e.target.value)}
      className="w-full px-3 py-2 border border-gray-300 rounded-md"
      rows={4}
      {...props}
    />
  ),
  Button: ({ children, ...props }) => (
    <button
      className="px-6 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
      {...props}
    >
      {children}
    </button>
  )
}
 
// Simple i18n adapter
const i18nAdapter = {
  t: (key) => key, // For demo, just return the key
}
 
function MyForm() {
  const [formData, setFormData] = useState({})
  
  const handleDataChange = (newData) => {
    setFormData(prevData => ({ ...prevData, ...newData }))
  }
 
  return (
    <DynamicForm
      config={formConfig}
      currentStepIndex={0}
      formData={formData}
      onDataChange={handleDataChange}
      onNext={() => console.log('Form submitted:', formData)}
      uiComponents={uiComponents}
      i18nAdapter={i18nAdapter}
    />
  )
}

Next.js Integration

For Next.js applications with next-intl:

import { DynamicForm } from '@benyue1978/next-dynamic-forms'
import { useTranslations } from 'next-intl'
 
function NextJSForm() {
  const t = useTranslations()
  
  const i18nAdapter = {
    t: (key, params) => t(key, params)
  }
 
  return (
    <DynamicForm
      config={formConfig}
      currentStepIndex={0}
      formData={formData}
      onDataChange={handleDataChange}
      onNext={handleNext}
      uiComponents={uiComponents}
      i18nAdapter={i18nAdapter}
    />
  )
}

Configuration Format

Forms are defined using simple JSON configurations:

{
  "id": "contact-form",
  "templateName": "contact",
  "steps": [
    {
      "id": "basic-info",
      "title": "Basic Information",
      "description": "Please provide your contact details",
      "fields": [
        {
          "name": "name",
          "type": "input",
          "label": "Full Name",
          "required": true
        },
        {
          "name": "email",
          "type": "input",
          "label": "Email Address",
          "required": true
        }
      ]
    }
  ]
}

Next Steps

Demos - Explore interactive examples
Playground - Try it live in your browser