@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
  id={'editableDivid'}
  suggestion={suggestions}
  chipClass="chip"
  editableDivClass="editable-div"
  suggestionBoxClass="suggestionBox"
  setHtml={setHtml}
  setText={setText}
  onEnterBtnEvent={handleEnterBtn}
  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.

• id (optional) : CSS id for the Editable-Div.

• 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'.

• setText (optional): It is required for the innerText of the editable-div.

• setText (optional): It is required for the innerHTML of the editable-div.

• 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.

• onEnterBtnEvent (optional): Function handles the event when enter button is pressed on Input Field.

• 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 [defaultValue, setdefaultValue] = useState("Start Typing");
  const [html, setHtml] = useState("");
  const [text, setText] = useState("");

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

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

  const handleEnterBtn = ()=>{
    console.log('Handled Enter Btn');
  }

   return (
    <div style={{ display: 'flex', justifyContent: 'center' }} >
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <CustomAutoSuggest
            id={'editableDivid'}
            suggestion={suggestions}
            chipClass="chip"
            editableDivClass="editable-div"
            suggestionBoxClass="suggestionBox"
            setHtml={setHtml}
            setText={setText}
            onEnterBtnEvent={handleEnterBtn}
            getInputValueWithContext={getInputValueWithContext}
            defaultValue={defaultValue}
          />
        </div>
      </div>
    </div>
  );
};

export default MyComponent;

Credits

The CustomAutoSuggest component was developed by Tanish Jain and Idris Bohra