README
react-rich-mentions
React library to handle @mentions, #channels, :smileys: and whatever with styles.
Getting started
Install the react-rich-mentions package via npm:
npm install react-rich-mentions --save
Or yarn:
yarn add react-rich-mentions
The package exports React components for rendering the mentions autocomplete and contenteditable :
import {
RichMentionsInput,
RichMentionsAutocomplete,
RichMentionsContext,
RichMentionsProvider,
} from 'react-rich-mentions';
RichMentionsProvider
- Feed it with your components and the mention configsRichMentionsInput
- The div[contenteditable] used as TextFieldRichMentionsAutocomplete
- The default Autocomplete component given with the library (can be overwritten)RichMentionsContext
- Use it to create your own Autocomplete or custom controller.
Example:
const configs = [
{
// The fragment to transform to readable element.
// For example, slack is using `<[name]|[id]>` -> `<vince|U82737823>`
match: /<(@\w+)\|([^>]+)>/g,
// Use it in combinaison with .match to choose what to display to your user instead of the fragment
// Given the regex `/<(@\w+)\|([^>]+)>/g` and the fragment `<vince|U82737823>`
// -