Custom Fields Autocomplete

A flexible and reusable React component for managing custom fields with autocomplete functionality, built with Material-UI.

Features

• 🎯 Provider Pattern: Easy configuration and state management
• 🔄 Reusable: Drop-in component for any React application
• 🎨 Customizable: Extensive customization options for styling and behavior
• 📱 Responsive: Works seamlessly across different screen sizes
• 🔧 TypeScript Ready: Full TypeScript support (types included)
• ⚡ Performance: Optimized for smooth user experience

Installation

npm install react-custom-fields-autocomplete

Peer Dependencies

Make sure you have these peer dependencies installed:

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

Basic Usage

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

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

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

Advanced Configuration

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

  return (
    <CustomFieldsProvider 
      initialFields={fields}
      onFieldsChange={setFields}
      labelOptions={['Priority', 'Category', 'Status']}
      valueOptions={['High', 'Medium', 'Low']}
      labelProps={{
        placeholder: 'Select field name...',
        variant: 'outlined'
      }}
      valueProps={{
        placeholder: 'Select value...',
        variant: 'outlined'
      }}
      buttonProps={{
        addText: 'Add Field',
        removeText: 'Remove'
      }}
    >
      <CustomFieldsAutocomplete />
    </CustomFieldsProvider>
  );
};

API Reference

CustomFieldsProvider Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | initialFields | Array | [] | Initial array of custom fields | | onFieldsChange | Function | undefined | Callback when fields change | | labelOptions | Array | [] | Options for label autocomplete | | valueOptions | Array | [] | Options for value autocomplete | | labelProps | Object | {} | Props passed to label autocomplete | | valueProps | Object | {} | Props passed to value autocomplete | | fieldProps | Object | {} | Props for field container styling | | buttonProps | Object | {} | Props for button customization |

useCustomFields Hook

Returns an object with:

• customFields: Current array of fields
• setCustomFields: Function to update all fields
• addCustomField: Function to add a new field
• removeCustomField: Function to remove a field by ID
• updateField: Function to update a specific field
• Configuration props (labelOptions, valueOptions, etc.)

Field Object Structure

{
  id: number,      // Unique identifier
  label: string,   // Field label/name
  value: string    // Field value
}

Customization Examples

Custom Styling

<CustomFieldsProvider
  fieldProps={{
    paperSx: { 
      backgroundColor: '#f5f5f5',
      border: '2px solid #e0e0e0'
    }
  }}
  buttonProps={{
    addSx: { mt: 2, backgroundColor: 'primary.main' },
    removeSx: { color: 'error.main' }
  }}
>
  <CustomFieldsAutocomplete />
</CustomFieldsProvider>

Custom Implementation

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

const CustomComponent = () => {
  const { customFields, addCustomField, removeCustomField } = useCustomFields();
  
  return (
    <div>
      <h3>Total Fields: {customFields.length}</h3>
      {/* Your custom UI here */}
    </div>
  );
};

Development

# Install dependencies
npm install

# Build the package
npm run build

# Run in development mode
npm run dev

# Run tests
npm test

# Lint code
npm run lint

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT © Andrei-Constantin Alexandru

Support

• 🐛 Issues: GitHub Issues
• 📖 Documentation: Official Page