react-chips-autocomplete

React Chips Autocomplete

AutoCompleteChips is a versatile React component that combines an autocomplete input with a chip/tag display. It enables users to effortlessly input values by providing autocomplete suggestions and visually presents selected items as interactive chips. Customize the appearance and behavior of the component to seamlessly integrate it into your React applications.

Installation

You can install the package using npm:

npm install react-chips-autocomplete


usage 

import React from 'react';
import { AutoCompleteChips } from 'react-chips-autocomplete';

function App() {
  const Data = [
    { label: 'John Doe', id: 1 },
    { label: 'Jane Smith', id: 2 },
    { label: 'Alice Johnson', id: 3 },
    // Add more data as needed
  ];

  return (
    <AutoCompleteChips
      Data={Data} // must add Data[]
      listOnClick={(data) => console.log(data)}
      chipDeleteOnClick={(data) => console.log(data)}
      width={10}
      height={2}
      borderRadius={0}
      borderWidth={2}
      borderColor='lightblue'
      chipBgColor='red'
      chipTextColor='white'
      chipfontSize={12}
      chipMargin={2}
      crossFillColor='white'
      placeholder='Enter...'
    />
  );
}

export default App;



Props
+Data: An array of objects representing the data for autocomplete.
+listOnClick: Callback function triggered on selecting an item from the autocomplete list.
+chipDeleteOnClick: Callback function triggered on deleting a chip.
+width: Width of the component.
+height: Height of the input.
+borderRadius: Border radius of the input.
+borderWidth: Border width of the input.
+borderColor: Border color of the input.
+chipBgColor: Background color of the chips.
+chipTextColor: Text color of the chips.
+chipfontSize: Font size of the chips.
+chipMargin: Margin of the chips.
+crossFillColor: Fill color of the delete icon in the chips.

## Props

## CSS Class Names
textinput
Description: The input field of the AutoCompleteChips component.
chipcontainer
Description: The container for displaying the chips.
chipsubdiv
Description: The container for each individual chip.


#### `Data` (Array)

An array of objects representing the data for autocomplete. Each object should have at least a `label` and an `id`. Example:

```jsx
const Data = [
  { label: 'John Doe', id: 1 },
  { label: 'Jane Smith', id: 2 },
  { label: 'Alice Johnson', id: 3 },
  // Add more data as needed
];


listOnClick (Function)
A callback function triggered when a user selects an item from the autocomplete list. It receives the selected data as an argument. Example:
const handleListClick = (selectedData) => {
  console.log('Selected Data:', selectedData);
};

chipDeleteOnClick (Function)
A callback function triggered when a user deletes a chip. It receives the deleted chip's data as an argument. Example:
const handleChipDelete = (deletedChip) => {
  console.log('Deleted Chip:', deletedChip);
};

width (Number)
Width of the component. Example:

const width = 10;

height (Number)
Height of the input. Example:

const height = 2;


borderRadius (Number)
Border radius of the input. Example:

const borderRadius = 5;

borderWidth (Number)
Border width of the input. Example:

const borderWidth = 1;

borderColor (String)
Border color of the input. Example:

const borderColor = 'lightblue';

chipBgColor (String)
Background color of the chips. Example:

const chipBgColor = 'red';  

chipTextColor (String)
Text color of the chips. Example:

const chipTextColor = 'white';

chipfontSize (Number)
Font size of the chips. Example:

const chipfontSize = 12;

chipMargin (Number)
Margin of the chips. Example:

const chipMargin = 2; // in px

crossFillColor (String)
Fill color of the delete icon in the chips. Example:

const crossFillColor = 'white';

Placeholder = "The placeholder text for the input field."