diff --git a/README.md b/README.md
index 01fd2efe..d32658d5 100755
--- a/README.md
+++ b/README.md
@@ -79,6 +79,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.)
 
diff --git a/demo/src/examples/CustomMentionRenderer.js b/demo/src/examples/CustomMentionRenderer.js
new file mode 100644
index 00000000..34bf3724
--- /dev/null
+++ b/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)
diff --git a/src/Mention.js b/src/Mention.js
index 36bdc687..6f63758a 100644
--- a/src/Mention.js
+++ b/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