Added a render prop to Mention component for custom rendering the display value

README.md

@@ -78,6 +78,7 @@ Each data source is configured using a `Mention` component, which has the follow
 | regex            | RegExp                                                       | automatically derived from `markup` pattern | Allows providing a custom regular expression for parsing your markup and extracting the placeholder interpolations (optional)                          |  |
 | onAdd            | function (id, display, startPos, endPos)                                       | empty function                              | Callback invoked when a suggestion has been added (optional)                                                                                           |
 | appendSpaceOnAdd | boolean                                                      | `false`                                     | Append a space when a suggestion has been added (optional)                                                                                             |
+| render           | function (display)                                           | `null`                                     | Allows customizing how mention value is rendered (optional)                                                                                             |
 
 If a function is passed as the `data` prop, that function will be called with the current search query as first, and a callback function as second argument. The callback can be used to provide results asynchronously, e.g., after fetch requests. (It can even be called multiple times to update the list of suggestions.)
 

demo/src/examples/CustomMentionRenderer.js

@@ -0,0 +1,41 @@
+import React from 'react'
+
+import { Mention, MentionsInput } from '../../../src'
+
+import { provideExampleValue } from './higher-order'
+import defaultStyle from './defaultStyle'
+import defaultMentionStyle from './defaultMentionStyle'
+
+const style = {
+  fontWeight: 'bold',
+  backgroundColor: '#cee4e5',
+}
+
+function CustomMentionRenderer({ value, data, onChange, onAdd }) {
+  return (
+    <div className="single-line">
+      <h3>Custom mention renderer</h3>
+
+      <MentionsInput
+        singleLine
+        value={value}
+        onChange={onChange}
+        style={defaultStyle}
+        placeholder={"Mention people using '@'"}
+        a11ySuggestionsListLabel={"Suggested mentions"}
+      >
+        <Mention
+          data={data}
+          onAdd={onAdd}
+          style={defaultMentionStyle}
+          render={(display) => (
+            <span style={style}>{display}</span>
+          )} />
+      </MentionsInput>
+    </div>
+  )
+}
+
+const asExample = provideExampleValue('')
+
+export default asExample(CustomMentionRenderer)

demo/src/examples/Examples.js

@@ -6,6 +6,7 @@ import AsyncGithubUserMentions from './AsyncGithubUserMentions'
 import CssModules from './CssModules'
 import Emojis from './Emojis'
 import CutCopyPaste from './CutCopyPaste'
+import CustomMentionRenderer from './CustomMentionRenderer'
 import MultipleTrigger from './MultipleTrigger'
 import Scrollable from './Scrollable'
 import SingleLine from './SingleLine'
@@ -63,6 +64,7 @@ export default function Examples() {
         <Emojis data={users} />
         <SuggestionPortal data={users} />
         <BottomGuard data={users} />
+        <CustomMentionRenderer data={users} />
       </div>
     </StylesViaJss>
   )

src/Mention.js

@@ -6,7 +6,10 @@ const defaultStyle = {
   fontWeight: 'inherit',
 }
 
-const Mention = ({ display, style, className, classNames }) => {
+const Mention = ({ display, style, className, classNames, render }) => {
+  if(render) {
+    return render(display);
+  }
   const styles = useStyles(defaultStyle, { style, className, classNames })
   return <strong {...styles}>{display}</strong>
 }
@@ -40,6 +43,7 @@ Mention.propTypes = {
   allowSpaceInQuery: PropTypes.bool,
 
   isLoading: PropTypes.bool,
+  render: PropTypes.func
 }
 
 Mention.defaultProps = {
@@ -53,6 +57,7 @@ Mention.defaultProps = {
   renderSuggestion: null,
   isLoading: false,
   appendSpaceOnAdd: false,
+  render: null
 }
 
 export default Mention