React Slate Mentions

React component for enabling hashtags and mentions while editing. This is enabled while using either ``# or @ preceeding the text to be inserted.

Getting started

Install the react-slate-mentions using the command below:

npm install react-slate-mentions

Usage

Import the component to be used using the following:

import { MentionEditor } from 'react-slate-mentions'

Optionally, you can also import the base css styles.

import 'react-slate-mentions/dis/style.css'

Integrate the component into your project using the example below

<MentionEditor
  editorClassname={...}
  editorId={...}
  placeholder={...}
  hashTagEnabled
  menuItems={...}
  collectedItems={...}
  isProcessing={...}
  handleSearch={...}
  searchContainerClassName={...}
  searchMenuItemClassName={...}
  elementClassName={...}
  handleItemsCollected={...}
  handleOnChange={...}
  initialValue={...}
  allowUniqueHashTags={...}
  allowUniqueMentions={...}
  loadingComponent={...}
  isReadOnly={...}
/>

Component Props

The following are the available props for the component and their defaults

| Name | Type | Required | Description | Default | | :----------------------: | :------------------------------------------------------: | :------: | :---------------------------------------------------: | :---------: | | editorId | string | false | Editor ID | undefined | | placeholder | string | false | Editor placeholder text | undefined | | editorClassname | string | false | Editor classname | undefined | | menuItems | Array<{ key: string; value: string}> | false | List of dropdown items per trigger | undefined | | collectedItems | Array<{ key: string; value: string; prefix?: string }> | false | List of dropdown items for unique sorting | undefined | | isProcessing | boolean | false | State for pensing operations | undefined | | handleSearch | Function | false | Handle preparation of dropdown items in this function | undefined | | searchContainerClassName | string | false | Classname for editor menu container | undefined | | searchMenuItemClassName | string | false | Classname for editor dropdown menu items | undefined | | elementClassName | string | false | Classname for editor elements during render | undefined | | handleItemsCollected | Function | false | Function for returning newly added items | undefined | | handleOnChange | Function | false | Function for getting editor contents | undefined | | allowUniqueHashTags | boolean | false | Boolean for allowing/denying unique entries | undefined | | allowUniqueMentions | boolean | false | Boolean for allowing/denying unique entries | undefined | | loadingComponent | React.ReactNode | false | Component for displaying no result in the dropdown | undefined | | isReadOnly | boolean | false | Boolean for triggering edit/no-edit mode | undefined |