CustomAutoSuggest

The "CustomAutoSuggest" React component enhances an editable text input by providing auto-suggestion functionality. It empowers users to type text and receive suggestions for possible completions based on a provided list of suggestions.

One notable feature of CustomAutoSuggest is the ability for users to group their suggestions using group names. This grouping functionality allows users to organize and categorize their suggestions for a more organized and intuitive experience. Additionally, CustomAutoSuggest also supports using suggestions without grouping, providing flexibility to accommodate different use cases.

For a comprehensive understanding of the component and its capabilities, it is recommended to thoroughly read the accompanying documentation and example.

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';

2. Render the component in your JSX:

<CustomAutoSuggest
  id={'editableDivid'}
  editableDivRef={editableDivRef}
  suggestion={suggestions}
  chipClass="chip"
  editableDivClass="editable-div"
  suggestionBoxClass="suggestionBox"
  setHtml={setHtml}
  setText={setText}
  onEnterBtnEvent={handleEnterBtn}
  getInputValueWithContext={getInputValueWithContext}
  defaultValue={defaultValue}
  disable={false}
  groupByGroupName={false}
  symbolForSearching={'$'}
/>

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.

• editableDivRef (Required) : Editable-Div reference which is mandatory to pass in props.

• symbolForSearching (Required) - This prop is required for searching within the suggestions. The field allows you to perform searches only when you have provided a symbol or character to search with.

• 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): The function handles the event that occurs when the enter button is pressed on the input field. If the user has not provided the "onEnterBtnEvent" function, the default behavior for the input text will be to move to a new line.

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

• disable (boolean): Set to true to disable the auto-suggestion feature.

• groupByGroupName (boolean): Set to true to group the suggestions by their group names.

Example

Here's an example usage of the Simple 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 editableDivRef = useRef();


  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
            editableDivRef={editableDivRef}
            id={'editableDivid'}
            suggestion={suggestionWithGroups}
            chipClass="chip"
            editableDivClass="editable-div"
            suggestionBoxClass="suggestionBox"
            setHtml={setHtml}
            setText={setText}
            onEnterBtnEvent={handleEnterBtn}
            getInputValueWithContext={getInputValueWithContext}
            defaultValue={defaultValue}
            disable={false}
            groupByGroupName={false}
            symbolForSearching={'$'}
          />
        </div>
      </div>
    </div>
  );
};

export default MyComponent;

Example

Here's an example usage of the Grouped CustomAutoSuggest component:

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

const MyComponent = () => {
  const [defaultValue, setdefaultValue] = useState("Start Typing");
  const [html, setHtml] = useState("");
  const [text, setText] = useState("");
  const editableDivRef = useRef();

  const suggestionWithGroups = [
    { name: 'blocks', groupName: 'blocks', content: 'context.blocks' },
    {
      name: 'current_time',
      groupName: 'blocks',
      content: 'context.blocks.current_time'
    },
    {
      name: 'type',
      groupName: 'blocks',
      content: 'context.blocks.send_sms.type'
    },
    {
      name: 'code',
      groupName: 'blocks',
      content: 'context.blocks.send_sms.code'
    },
    {
      name: 'add_to_spreadsheet',
      groupName: 'blocks',
      content: 'context.blocks.add_to_spreadsheet'
    },
    {
      name: 'type',
      groupName: 'blocks',
      content: 'context.blocks.add_to_spreadsheet.type'
    },
    {
      name: 'code',
      groupName: 'blocks',
      content: 'context.blocks.add_to_spreadsheet.code'
    },
    {
      name: 'add_to_airtable',
      groupName: 'blocks',
      content: 'context.blocks.add_to_airtable'
    },
    {
      name: 'type',
      groupName: 'blocks',
      content: 'context.blocks.add_to_airtable.type'
    },
    {
      name: 'code',
      groupName: 'blocks',
      content: 'context.blocks.add_to_airtable.code'
    },
    {
      name: 'non_nested_key',
      groupName: 'blocks',
      content: 'context.blocks.non_nested_key'
    },
    {
      name: 'another_non_nested_key',
      groupName: 'blocks',
      content: 'context.blocks.another_non_nested_key'
    },
    { name: 'order', groupName: 'order', content: 'context.order' },
    { name: 'root', groupName: 'order', content: 'context.order.root' },
    {
      name: 'check_time_condition',
      groupName: 'order',
      content: 'context.order.check_time_condition'
    },
    { name: 'order2', groupName: 'order2', content: 'context.order2' },
    { name: 'root', groupName: 'order2', content: 'context.order2.root' }
  ]

  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
            editableDivRef={editableDivRef}
            id={'editableDivid'}
            suggestion={suggestionWithGroups}
            chipClass="chip"
            editableDivClass="editable-div"
            suggestionBoxClass="suggestionBox"
            setHtml={setHtml}
            setText={setText}
            onEnterBtnEvent={handleEnterBtn}
            getInputValueWithContext={getInputValueWithContext}
            defaultValue={defaultValue}
            disable={false}
            groupByGroupName={true}
            symbolForSearching={'$'}
          />
        </div>
      </div>
    </div>
  );
};

export default MyComponent;

Credits

The CustomAutoSuggest component was developed by Tanish Jain and Idris Bohra