react-mentions

react-mentions copied to clipboard

How to add custom data inside mentions,

for example as of now we have id and display can we add type or other information

I tried all of the below but nothing worked

<Mention
    type="user"
    trigger={/(\@([A-Za-z0-9_.]*))$/}
    data={[
        {
            id: '123',
            display: 'Jhon Deo',
            type: 'user'
        },
        {
            id: '4322',
            display: 'Developer',
            type: 'role'
        }
    ]}
    markup="@{{__id__||__display__||__type__}}"
    displayTransform={(id: any, display: any) => {
        return `@${display}`
    }}
    renderSuggestion={renderSuggestion}
/>

Any Help is appreciated

Thanks

Same problem here

I have similar requirement for adding user icons/avatars in suggestion list.

const profiles = [
        {
            image: '123',
            username: 'Jhon_Deo',
            name: 'John Doe'
        },
        {
            image: '4322',
            username: 'dev',
            name: 'Developer'
        }
    ]
const fetchUsers = query => {
    if (profiles.length > 0) {
      const tagsArray = profiles.map(tag => {
        return {
          id: tag.username,
          display: `@${tag.username}`,
          name: tag.name,
          image: tag.image
        }
      })
      return tagsArray
    }
  }

<Mention
    type="user"
    trigger={/(\@([A-Za-z0-9_.]*))$/}
    data={fetchUsers}
    markup="@{{__id__||__display__||__type__}}"
    displayTransform={(id: any, display: any) => {
        return `@${display}`
    }}
    renderSuggestion={renderSuggestion}
/>

You may try this

try put it into id, like:

const data = users.map((u) => ({ ...u, id: `[[${u.type}]][[${u.id}]]` }));

<Mention
  markup="@{{__display__}}{{__id__}}"
  trigger="@"
  appendSpaceOnAdd
  data={data}
  renderSuggestion={(suggestion, search, highlightedDisplay, index, focused) => (
    <div>{highlightedDisplay}</div>
  )}
/>

then you will process the onChange to parse:

{id: "[[_mentioned_user_type_here_]][[_mentioned_user_id_here_]]", display: "xxxx", childIndex: 0, index: 4, plainTextIndex: 4}

and extract w/e you wanted from id with something like:

Regular expression to get the value inside double curly braces “{{ }}” Paradoxis/findReplace.js