React component for enabling hashtags and mentions while editing. This is enabled while using either ``# or @
preceeding the text to be inserted.
Install the react-slate-mentions
using the command below:
npm install react-slate-mentions
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={...}
/>
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 |