Props Reference

Props

MentionOption

type MentionOption = {
  label: string;
  value: string | Function; // Can be a string identifier or executable function
};

SlotProps

The slotsProps prop allows you to customize the internal elements of the MentionInput. All properties are optional.

type SlotProps = Partial<{
  container: React.HTMLAttributes<HTMLDivElement>; // Props for the outer container
  contentEditable: Omit<
    React.HTMLAttributes<HTMLDivElement>,
    | "ref"
    | "contentEditable"
    | "suppressContentEditableWarning"
    | "onInput"
    | "onKeyDown"
    | "onFocus"
    | "onBlur"
    | "onPaste"
    | "role"
    | "aria-controls"
    | "aria-activedescendant"
    | "aria-haspopup"
    | "aria-autocomplete"
    | "aria-expanded"
  >; // Props for the contentEditable element
  modal: Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "role" | "style">; // Props for the dropdown listbox
  option: Omit<
    React.HTMLAttributes<HTMLDivElement>,
    "id" | "key" | "role" | "style" | "aria-selected" | "onMouseDown"
  >; // Props for each option
  noOptions: React.HTMLAttributes<HTMLDivElement>; // Props for the 'No items found' message
  highlightedClassName: string; // Custom class for the highlighted option
  chipClassName: string; // Custom class for mention chips
}>;

• container: Props for the outer <div> container.
• contentEditable: Props for the contentEditable <div> element (excluding controlled props for mention functionality).
• modal: Props for the dropdown listbox container.
• option: Props for each option in the dropdown.
• noOptions: Props for the 'No items found' message.
• highlightedClassName: Custom class for the currently highlighted option.
• chipClassName: Custom class for mention chips displayed in the input.

keepTriggerOnSelect

If true (default), the trigger character (such as @) will be kept in the input when an option is selected. If false, the trigger character will be removed before the selected label.

<MentionInput keepTriggerOnSelect={false} ... />

trigger

The trigger prop allows you to customize which character or string opens the mention dropdown. By default, this is set to @, but you can use any character (e.g., #) or even a multi-character string (e.g., ::).

<MentionInput trigger="#" ... />

This will open the mention dropdown when the user types # instead of @.

autoConvertMentions

When true, the component will automatically convert text mentions to chips when the user types a space or presses Enter. This is useful for scenarios where users type mentions manually without selecting from the dropdown.

<MentionInput autoConvertMentions={true} ... />

How it works:

• When enabled, the component monitors for space characters and Enter key presses
• It scans the text for patterns like @username that match your options
• Matching text is automatically converted to chips
• The conversion happens asynchronously to ensure DOM updates are complete
• This feature works independently of the paste functionality, which has its own mention parsing

⚠️ Performance Warning: This feature is not enabled by default as it requires additional performance testing in production environments. The automatic conversion process runs on every space/enter key press and may impact performance with large option lists or frequent typing.

onKeyDown

The onKeyDown prop allows you to handle keyboard events in the MentionInput. This is useful for implementing custom keyboard shortcuts, form submission, or other keyboard-based interactions.

Important: When the mention modal is open, certain keys are handled internally by the component and won't trigger your onKeyDown callback:

• Enter and Tab - Used for selecting options
• Escape - Used for closing the modal
• ArrowUp and ArrowDown - Used for navigation

<MentionInput
  onKeyDown={(event) => {
    // Handle custom keyboard shortcuts
    if (event.ctrlKey && event.key === "s") {
      event.preventDefault();
      alert("Ctrl + S");
    }
  }}
/>

Form Submission Example

Here's how to handle form submission when the user presses Enter (but only when the modal is closed):

import { useState } from "react";
import { MentionInput } from "@mentis/react";

function ChatForm() {
  const [value, setValue] = useState("");

  const handleSubmit = async () => {
    console.log("submit");
    setValue("");
  };

  return (
    <form onSubmit={(e) => e.preventDefault()}>
      <MentionInput
        value={value}
        onChange={setValue}
        onKeyDown={(event) => {
          // Handle Enter key for form submission
          if (event.key === "Enter") {
            event.preventDefault();
            handleSubmit();
          }
        }}
        options={[
          { label: "Alice", value: "alice" },
          { label: "Bob", value: "bob" },
          { label: "Charlie", value: "charlie" },
        ]}
      />
    </form>
  );
}

In this example:

• The onKeyDown handler checks if the Enter key was pressed
• The component automatically handles Enter for mention selection when the modal is open
• When the modal is closed, Enter will trigger the form submission
• The component's internal handling takes precedence over custom handlers

Keyboard Shortcuts Example

You can also implement custom keyboard shortcuts:

<MentionInput
  onKeyDown={(event) => {
    // Ctrl/Cmd + Enter to submit
    if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
      event.preventDefault();
      handleSubmit();
    }

    // Ctrl/Cmd + K to focus
    if ((event.ctrlKey || event.metaKey) && event.key === "k") {
      event.preventDefault();
      inputRef.current?.focus();
    }
  }}
/>

Function Values

Options can have function values that execute when selected. This is useful for actions like sending messages, clearing input, or triggering other side effects:

<MentionInput
  options={[
    { label: "Send Message", value: () => console.log("Message sent!") },
    { label: "Clear Input", value: () => setValue("") },
    { label: "Alice", value: "alice" },
  ]}
/>

When a function value is selected:

• The trigger and query text are removed from the input
• The function is executed
• The modal is closed
• No mention data is added to the input