qbs-core

AutoComplete Component

AutoComplete is a React component that allows users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.

Table of Contents

• Installation
• Usage
• Props
• Examples
• Contributing
• License

Installation

If your component is published on npm, users can install it using npm or yarn:

import React from 'react';
import AutoComplete from 'your-package-name';

const ExampleComponent = () => {
  const handleChange = (value) => {
    console.log("Selected value: ", value);
  };

  return (
    <AutoComplete 
      label="Search"
      onChange={handleChange}
      // other props
    />
 

Props

AutoComplete Component Props

• id (string, optional) - The ID of the input element.
• label (string) - The label for the input element.
• fullWidth (boolean, optional) - If true, the input will take up the full width of its container. Default is false.
• required (boolean, optional) - If true, the input will be required. Default is false.
• value (valueProps, optional) - The current selected value.
• onChange (function) - Function to handle the change event.
• data (array, optional) - The array of data for generating list suggestions.
• type (string, optional) - Determines the type of autocomplete. Options are 'custom_select', 'auto_complete', and 'custom_search_select'. Default is 'custom_select'.
• placeholder (string, optional) - Placeholder text for the input field.
• getData (function, optional) - Asynchronous function to fetch data for suggestions.
• errors (object, optional) - Any validation errors.
• name (string) - The name of the input element.
• readOnly (boolean, optional) - If true, the input is read-only. Default is false.
• disabled (boolean, optional) - If true, the input is disabled. Default is false.

valueProps Object Type

• id (string) - The unique identifier of the value.
• name (string) - The name of the value.

npm install qbs-core