@walkover/autosuggest-custom

CustomAutoSuggest

CustomAutoSuggest is a React component that provides auto-suggestion functionality for an editable text input. It allows users to type in text and suggests possible completions based on a provided list of suggestions.

Installation

You can install the CustomAutoSuggest component using npm:

npm install @walkover/autosuggest-custom

Usage

To use the CustomAutoSuggest component in your React application, follow these steps:

1. Import the component:

import CustomAutoSuggest from '@walkover/autosuggest-custom';

1. Render the component in your JSX:

<CustomAutoSuggest
  suggestion={suggestions}
  chipClass="chip"
  editableDivClass="editable-div"
  suggestionBoxClass="suggestionBox"
  getInputValueWithContext={getInputValueWithContext}
  defaultValue={defaultValue}
/>

Props

The CustomAutoSuggest component accepts the following props:

• suggestion (optional): An array of suggestion objects. Each suggestion object should have a name property that represents the suggestion's display name and an optional content property that provides additional information for the suggestion.

• chipClass (optional): CSS class name for the suggestion chips. Defaults to 'chip'.

• editableDivClass (optional): CSS class name for the editable text input. Defaults to 'editable-div'.

• suggestionBoxClass (optional): CSS class name for the suggestion box container. Defaults to 'suggestionBox'.

• getInputValueWithContext (optional): A callback function that receives the converted text value and the HTML code of the editable div. It is called whenever the input value changes.

• defaultValue (optional): The initial value of the editable div.

Example

Here's an example usage of the CustomAutoSuggest component:

import React from 'react';
import CustomAutoSuggest from '@walkover/autosuggest-custom';

const suggestions = [
  { name: 'Apple', content: 'Fruit' },
  { name: 'Banana', content: 'Fruit' },
  { name: 'Carrot', content: 'Vegetable' },
  { name: 'Tomato', content: 'Fruit/Vegetable' },
];

const MyComponent = () => {
  const getInputValueWithContext = (convertedHtmlCode, htmlCode) => {
    // Handle the converted input value and HTML code
    console.log('Converted Value:', convertedHtmlCode);
    console.log('HTML Code:', htmlCode);
  };

  return (
    <div>
      <h1>Custom Auto Suggest Example</h1>
      <CustomAutoSuggest
        suggestion={suggestions}
        getInputValueWithContext={getInputValueWithContext}
        defaultValue="Start typing..."
      />
    </div>
  );
};

export default MyComponent;

Credits

The CustomAutoSuggest component was developed by Tanish Jain and Idris Bohra