Dynamic Form Builder Component

Build flexible, dynamic forms with ease using our powerful React component featuring Material-UI autocomplete functionality.

Why Choose React Custom Fields Autocomplete?

Transform your React applications with a component that makes building dynamic forms effortless. Whether you’re creating admin panels, user forms, or data entry interfaces, our component provides the flexibility and power you need.

✨ Key Features

🎯 Provider Pattern Architecture

Clean, maintainable code structure
Centralized state management
Easy configuration across your app

🔄 Plug & Play Simplicity

Drop into any React application
Zero configuration required to get started
Works with existing Material-UI themes

🎨 Fully Customizable

Extensive styling options
Custom props for every element
Seamless brand integration

📱 Mobile-First Design

Responsive across all devices
Touch-friendly interactions
Optimized for modern browsers

🔧 TypeScript Ready

Full type safety included
IntelliSense support
Better developer experience

⚡ Performance Optimized

Efficient re-rendering
Smooth user interactions
Lightweight bundle size

📦 Quick Installation

Get started in minutes with npm or yarn:

npm install react-custom-fields-autocomplete

Required Peer Dependencies:

npm install react react-dom @mui/material @emotion/react @emotion/styled

Demo:

🎯 Basic Usage Example

import React, { useState } from 'react';
import { 
  CustomFieldsAutocomplete, 
  CustomFieldsProvider 
} from 'react-custom-fields-autocomplete';

const MyApp = () => {
  const [fields, setFields] = useState([]);

  return (
    <CustomFieldsProvider 
      initialFields={fields}
      onFieldsChange={setFields}
    >
      <CustomFieldsAutocomplete />
    </CustomFieldsProvider>
  );
};

That’s it! Your dynamic form builder is ready to use.

🔧 Advanced Configuration

Take full control with extensive customization options:

const AdvancedExample = () => {
  const [fields, setFields] = useState([
    { id: 1, label: 'Priority', value: 'High' },
    { id: 2, label: 'Category', value: 'Development' }
  ]);

  return (
    <CustomFieldsProvider 
      initialFields={fields}
      onFieldsChange={setFields}
      labelOptions={['Priority', 'Category', 'Status', 'Department']}
      valueOptions={['High', 'Medium', 'Low', 'Critical']}
      labelProps={{
        placeholder: 'Choose field name...',
        variant: 'outlined',
        size: 'small'
      }}
      valueProps={{
        placeholder: 'Enter value...',
        variant: 'filled'
      }}
      buttonProps={{
        addText: '+ Add New Field',
        removeText: '✕'
      }}
    >
      <CustomFieldsAutocomplete />
    </CustomFieldsProvider>
  );
};

📚 Complete API Reference

CustomFieldsProvider Props

Property	Type	Default	Description
`initialFields`	`Array<FieldObject>`	`[]`	Starting fields array
`onFieldsChange`	`(fields: Array) => void`	`undefined`	Callback when fields update
`labelOptions`	`string[]`	`[]`	Autocomplete options for labels
`valueOptions`	`string[]`	`[]`	Autocomplete options for values
`labelProps`	`AutocompleteProps`	`{}`	Material-UI Autocomplete props for labels
`valueProps`	`AutocompleteProps`	`{}`	Material-UI Autocomplete props for values
`fieldProps`	`PaperProps & CustomProps`	`{}`	Container styling props
`buttonProps`	`ButtonCustomProps`	`{}`	Button customization options

useCustomFields Hook

Access the full API programmatically:

const {
  customFields,        // Current fields array
  setCustomFields,     // Replace all fields
  addCustomField,      // Add new field
  removeCustomField,   // Remove by ID
  updateField,         // Update specific field
  // ...configuration props
} = useCustomFields();

Field Object Structure

interface FieldObject {
  id: number;     // Unique identifier
  label: string;  // Field name/label
  value: string;  // Field value
}

🎨 Styling & Customization Examples

Custom Theme Integration

<CustomFieldsProvider
  fieldProps={{
    paperSx: { 
      backgroundColor: 'background.paper',
      border: '1px solid',
      borderColor: 'divider',
      borderRadius: 2,
      boxShadow: 2
    }
  }}
  buttonProps={{
    addSx: { 
      mt: 2, 
      backgroundColor: 'primary.main',
      '&:hover': { backgroundColor: 'primary.dark' }
    },
    removeSx: { 
      color: 'error.main',
      '&:hover': { backgroundColor: 'error.light' }
    }
  }}
>
  <CustomFieldsAutocomplete />
</CustomFieldsProvider>

Building Custom Components

import { useCustomFields } from 'react-custom-fields-autocomplete';

const CustomFieldCounter = () => {
  const { customFields, addCustomField } = useCustomFields();
  
  return (
    <div>
      <h3>Total Fields: {customFields.length}</h3>
      <button onClick={addCustomField}>
        Add Field
      </button>
    </div>
  );
};

🏗️ Real-World Use Cases

Admin Dashboards

Dynamic configuration panels
User preference settings
Metadata management

E-commerce Platforms

Product attribute builders
Custom checkout fields
Inventory management

Data Entry Applications

Survey builders
Form generators
Database record creation

CRM Systems

Custom contact fields
Lead qualification forms
Customer data collection

🚀 Getting Started Checklist

[ ] Install the package and peer dependencies
[ ] Import CustomFieldsProvider and CustomFieldsAutocomplete
[ ] Wrap your component with the provider
[ ] Set up state management for fields
[ ] Customize styling to match your brand
[ ] Add your own autocomplete options
[ ] Test responsive behavior

💡 Pro Tips

Performance Optimization

Use React.memo for custom field components
Implement debounced autocomplete for large datasets
Consider virtualization for 100+ fields

User Experience

Provide clear placeholder text
Use consistent validation patterns
Add keyboard navigation support

Accessibility

Ensure proper ARIA labels
Test with screen readers
Maintain focus management

📈 SEO Benefits for Your App

Using our component can improve your application’s SEO by:

Faster Development: Ship features quicker with pre-built components
Better UX: Smooth interactions improve user engagement metrics
Mobile Optimization: Responsive design improves mobile search rankings
Performance: Optimized rendering reduces bounce rates

🛠️ Development & Contributing

# Development setup
npm install
npm run dev

# Building
npm run build

# Testing
npm test

# Linting
npm run lint

Contributing Guidelines:

Fork the repository
Create feature branch (git checkout -b feature/amazing-feature)
Commit changes (git commit -m 'Add amazing feature')
Push to branch (git push origin feature/amazing-feature)
Open Pull Request

📞 Support & Resources

Issues: GitHub Issues License: MIT

🎉 Ready to Build Amazing Forms?

Join the developers who are already using React Custom Fields Autocomplete to create better user experiences. Start building dynamic, flexible forms today!

npm install react-custom-fields-autocomplete

Questions? Need help? Open an issue on GitHub.

Evaficy

React Custom Fields Autocomplete