@flownet/form-auto-complete

This project provides an auto-complete input field component built using React. It is designed to help users implement an easy-to-use, flexible form component with auto-complete functionality in their web applications. Users can integrate this component to enhance form interactions by allowing end-users to select options from a pre-defined list or even add their own entries, depending on the configuration.

How It Works

The component operates by managing an internal state for selected values and input text. It leverages the React library to manage state changes and render updates dynamically. By incorporating the Autocomplete component from the Material-UI library, it provides a robust and customizable auto-complete feature that developers can include in their forms for more intuitive user inputs.

Key Features

• Auto-complete Input: Provides a simple way for users to search and select from a list of predefined options.
• Multiple Selection: Can be configured to allow multiple selections from the options.
• Dynamic Options: Supports dynamic changes to the list of selectable options.
• Customizable Labels: Allows customization of how options are displayed with getOptionLabel.
• Input Management: Includes properties to manage the input and selected values programmatically.
• Configurable Behaviour: Options to control features like case sensitivity, readiness state, and more.

Conclusion

The @flownet/form-auto-complete component is a straightforward way to enhance forms with auto-complete capabilities, making user interactions smoother and more efficient. By using this component, developers can offer enhanced form functionalities without diving into extensive coding, making it a useful addition to any web application form.

@flownet/form-auto-complete Developer Guide

Overview

The @flownet/form-auto-complete library is a versatile tool designed to simplify the implementation of autocomplete functionality in forms within React applications. By leveraging this library, developers can easily integrate a robust autocomplete feature that enhances user experience by providing suggestions as users type. The library is built to accommodate a variety of configuration options, allowing customization of the autocomplete behavior and presentation.

Installation

To install the @flownet/form-auto-complete library, you can use either npm or yarn. Simply run one of the following commands in your project directory:

# Using npm
npm install @flownet/form-auto-complete

# Using yarn
yarn add @flownet/form-auto-complete

Usage

Integrating the autocomplete feature into your React application using the @flownet/form-auto-complete library is straightforward. Below is a basic example demonstrating the setup and use of the component.

Basic Setup

import React from 'react';
import Autocomplete from '@flownet/form-auto-complete';

const MyAutoCompleteComponent = () => {
  const form = {};

  return (
    <Autocomplete
      form={form}
      input={{
        options: [{ id: 1, label: 'Option 1' }, { id: 2, label: 'Option 2' }],
        value: { id: 1, label: 'Option 1' },
        onChange: ({ value }) => console.log('Selected Value:', value),
        getOptionLabel: (option) => option.label,
        getOptionKey: (option) => option.id,
        placeholder: 'Select an option',
        multiple: false,
        limitTags: 3,
      }}
    />
  );
};

export default MyAutoCompleteComponent;

Examples

Single Selection Autocomplete

The following example demonstrates a single selection autocomplete setup with basic options and a method to handle value changes.

import React from 'react';
import Autocomplete from '@flownet/form-auto-complete';

const SingleSelectionExample = () => {
  return (
    <Autocomplete
      input={{
        options: ['Apple', 'Banana', 'Cherry'],
        onChange: ({ value }) => console.log('Selected:', value),
      }}
    />
  );
};

export default SingleSelectionExample;

Multiple Selection Autocomplete

For multiple selection scenarios, set multiple: true. This allows the user to select more than one option from the list.

import React from 'react';
import Autocomplete from '@flownet/form-auto-complete';

const MultiSelectionExample = () => {
  return (
    <Autocomplete
      input={{
        options: ['Red', 'Green', 'Blue'],
        multiple: true,
        onChange: ({ value }) => console.log('Selected Values:', value),
      }}
    />
  );
};

export default MultiSelectionExample;

Acknowledgement

This library utilizes components from Material-UI to provide robust and accessible UI elements. We acknowledge the contributions of the Material-UI community for their comprehensive design and accessibility solutions.

Input Schema

$schema: https://json-schema.org/draft/2020-12/schema
type: object
properties:
  form:
    type: object
    properties:
      setValue:
        description: Method to set a value.
        type: string
      setOptions:
        description: Method to set options.
        type: array
        items:
          type: string
      setInputValue:
        description: Method to set input value.
        type: string
  input:
    type: object
    properties:
      value:
        description: The current selected value.
        type:
          - string
          - null
      options:
        description: Array of options to select from.
        type: array
        items:
          type: string
      input:
        type: object
        properties:
          value:
            description: The value of the input text.
            type: string
          onChange:
            description: Callback executed on input change.
            type: function
      getOptionKey:
        description: Function to get the option's key.
        type: function
        default: x => x.key || x.id || x
      getOptionLabel:
        description: Function to get the option's label.
        type: function
        default: x => x.label || x.title || x
      multiple:
        description: Allows multiple selection.
        type: boolean
        default: false
      limitTags:
        description: Maximum number of tags displayed.
        type: integer
        default: 3
      disablePortal:
        description: Disables the portal feature.
        type: boolean
        default: false
      freeSolo:
        description: Allows free solo input.
        type: boolean
        default: false
      isOptionEqualToValue:
        description: Function to determine if an option matches a value.
        type: function
      filterOptions:
        description: Custom filter function for options.
        type: function
      getLimitTagsText:
        description: Function to define limit tags text.
        type: function
      getOptionDisabled:
        description: Function to determine if an option should be disabled.
        type: function
      groupBy:
        description: Function to group options.
        type: function
      includeInputInList:
        description: Include the input value in the option list.
        type: boolean
      loading:
        description: Set to true if data is being fetched.
        type: boolean
        default: false
      readOnly:
        description: Input is read-only.
        type: boolean
        default: false
      size:
        description: The size of the input field, like small, medium, or large.
        type: string
      required:
        description: If the input is required.
        type: boolean
        default: false
      autoFocus:
        description: If the input should focus automatically.
        type: boolean
        default: false
      placeholder:
        description: Placeholder text for the input.
        type: string
required: []