Custom mention renderer (#9)

signavio#502

README.md

@@ -82,6 +82,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)

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