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

[nikhil2kumar]

This PR includes the addition of the render method to the Mention component.

The method has display parameters and expects to return a react component to render the mention display value.

This would come in handy if there's a need to pass our own component instead of relying on the default functionality.

<Tooltip title="customTitleGoesHere"> <strong className="myClassName">{display}</strong> </Tooltip>

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/signavio/react-mentions/ApJRr7Y36K1aDsgrdEYuXew9ASM6
✅ Preview: https://react-mentions-git-fork-nikhil2kumar-customment-4691fc-signavio.vercel.app

[codecov-commenter]

Codecov Report

Merging #502 (c69b779) into master (a2c8856) will decrease coverage by 0.08%. The diff coverage is 66.66%.

@@            Coverage Diff             @@
##           master     #502      +/-   ##
==========================================
- Coverage   78.84%   78.76%   -0.09%     
==========================================
  Files          32       32              
  Lines         695      697       +2     
  Branches      108      109       +1     
==========================================
+ Hits          548      549       +1     
- Misses        146      147       +1     
  Partials        1        1              

Impacted Files	Coverage Δ
src/Mention.js	75.00% <66.66%> (-5.00%)	:arrow_down:

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update a2c8856...c69b779. Read the comment docs.

[dargue3]

This would be a much needed addition for my needs as well!

[mikeg0]

👍

This PR would give us the ability to apply different styles to different Mention types and add Tooltips. Note Slack's UI ...

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
react-mentions	✅ Ready (Inspect)	Visit Preview	Jun 15, 2022 at 5:27PM (UTC)

[jsheffers]

I would love this as well.

[haniequach25]

was this merged yet? i also want this as well

[icrocket]

Any update?

[matt-d-rat]

Really need support for this, can we get this merged please?

[hyanmandian]

Since internally this library uses only Mention props, we can create our own Mention component that just follows the same API, so to make it work I did:

const Mention = ({
  id,
  render,
  display,
}) => {
  if (render) {
    return render({ children: display, label: display, value: id });
  }
  return <strong {...props}>{display}</strong>;
};

Mention.defaultProps = {
  onAdd: () => null,
  markup: "@[__display__](__id__)",
  trigger: "@",
  onRemove: () => null,
  isLoading: false,
  displayTransform: (id?: string | number, display?: string) => display || id,
  renderSuggestion: null,
  appendSpaceOnAdd: false,
};

And then I just use this Mention instead of the library one