Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 7 commits into
base: master
Choose a base branch
from

Conversation

nikhil2kumar
Copy link
Contributor

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
Copy link

vercel bot commented Jun 14, 2021

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
Copy link

Codecov Report

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

Impacted file tree graph

@@            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%) ⬇️

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
Copy link

dargue3 commented Nov 2, 2021

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

@mikeg0
Copy link

mikeg0 commented May 18, 2022

👍

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

image

@atilafassina atilafassina force-pushed the master branch 2 times, most recently from 8265bf0 to 8dedc5d Compare May 27, 2022 06:16
@vercel
Copy link

vercel bot commented Jun 15, 2022

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
Copy link

I would love this as well.

@haniequach25
Copy link

was this merged yet? i also want this as well

JakeHedman added a commit to JakeHedman/react-mentions-continued that referenced this pull request Mar 10, 2023
@icrocket
Copy link

icrocket commented Sep 9, 2023

Any update?

@matt-d-rat
Copy link

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

@hyanmandian
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

9 participants