# Is it possible to use "Mentions" with the Channel component

**URL:** <https://community.sendbird.com/t/is-it-possible-to-use-mentions-with-the-channel-component/1854>\
**Category:** React\
**Created:** [March 11, 2021, 6:24pm UTC](https://community.sendbird.com/t/is-it-possible-to-use-mentions-with-the-channel-component/1854 "2021-03-11T18:24:02Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![mwq27](https://avatars.discourse-cdn.com/v4/letter/m/5e9695/32.png) [@mwq27](https://community.sendbird.com/u/mwq27)\
**Post date:** [March 11, 2021, 6:24pm UTC](https://community.sendbird.com/t/is-it-possible-to-use-mentions-with-the-channel-component/1854/1 "2021-03-11T18:24:02Z")

</div>

Is it possible to use the “@” mention feature with the `<Channel />` component in the React-based UIKit?

---

<div class="post-metadata">

**Author:** ![Tyler](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/tyler/32/810_2.png) [@Tyler](https://community.sendbird.com/u/Tyler)\
**Post date:** [March 11, 2021, 6:37pm UTC](https://community.sendbird.com/t/is-it-possible-to-use-mentions-with-the-channel-component/1854/2 "2021-03-11T18:37:19Z")

</div>

Hey @mwq27,

You should be able to do this by utilizing [getSendUserMessage](https://sendbird.com/docs/uikit/v1/javascript/guides/group-channel#2-components-3-withsendbird-).

Here is an example implementation of that selector:

```javascript
// getSendUserMessage & getSendFileMessage & getDeleteMessage & getUpdateUserMessage
import {
  SendBirdProvider,
  withSendBird,
  sendBirdSelectors,
} from "sendbird-uikit";
import "sendbird-uikit/dist/index.css";

const appId = process.env.APP_ID;
const userId = process.env.USER_ID;
const channelUrl = process.env.CHANNEL_URL;

const CustomComponent = (props) => {
  const {
      sendMessage,
      sendFileMessage,
      deleteMessage,
      updateLastMessage,
      sdk,
  } = props;
  const [lastMessage, setLastMessage] = useState({});
  const lastMessageId = lastMessage.messageId;
  return(
      <div onSubmit={e => e.preventDefault()}>
          {`Last MessageId: ${lastMessageId}`}
          <button onClick={() => {
              const params = new sdk.UserMessageParams();
              params.message = MESSAGE;
              sendMessage(channelUrl, params)
                  .then((pendingMessage) => {
                      setLastMessage(pendingMessage);
                      alert('Message is pending', pendingMessage);
                      return pendingMessage;
                  })
                  .then(message => {
                      alert('Message successfully sent', message);
                      setLastMessage(message);
                      console.warn(message);
                  })
                  .catch(e => {
                      console.warn(e);
                      alert('Couldn\'t send message.');
                  })
              }}
              > Send message
          </button>
          <button disable={!lastMessageId} onClick={() => {
              const params = new sdk.UserMessageParams();
              params.message = UPDATED_MESSAGE;
              updateLastMessage(channelUrl, lastMessageId, params)
                  .then((message) => {
                      setLastMessage(message);
                      alert('Message updated');
                  })
                  .catch(e => alert('Couldn\'t update a message.'))
              }}
              > Update last message
          </button>
          <button disable={!lastMessageId} onClick={() => {
              deleteMessage(channelUrl, lastMessage)
                  .then(() => {
                      alert('Message deleted');
                  })
                  .catch(e => {
                      console.warn(e);
                      alert('Couldn\'t delete a message.')
                  })
              }}
              > Delete last message
          </button>
          <br/>
          <input type="file" id="file-upload" />
          <button onClick={() => {
              const params = new sdk.FileMessageParams();
              params.file = document.getElementById('file-upload').files[0];
              sendFileMessage(channelUrl, params)
                  .then((pendingMessage) => {
                      setLastMessage(pendingMessage);
                      alert('Message is pending', pendingMessage);
                      return pendingMessage;
                  })
                  .then(message => {
                      alert('Message successfully sent', message);
                      setLastMessage(message);
                      console.warn(message);
                  })
                  .catch(e => alert('Couldn\'t delete message.'))
                          }}
              > Send file Message
          </button>
              </div>
      );
};

const CustomComponentWithSendBird = withSendBird(CustomComponent, (state) => {
  const sendMessage = sendBirdSelectors.getSendUserMessage(state);
  const sendFileMessage = sendBirdSelectors.getSendFileMessage(state);
  const deleteMessage = sendBirdSelectors.getDeleteMessage(state);
  const updateLastMessage = sendBirdSelectors.getUpdateUserMessage(state);
  const sdk = sendBirdSelectors.getSdk(state);
  return ({
      sendMessage,
      sendFileMessage,
      deleteMessage,
      updateLastMessage,
      sdk,
  });
});

export const MessageCRUDSelectors = () => (
  <SendBirdProvider appId={appId} userId={userId} nickname={userId}>
      <CustomComponentWithSendBird />
      <div style={{ width: '320px', height: '500px' }}>
          <Channel channelUrl={channelUrl} />
              </div>
  </SendBirdProvider>
);

```

---

<div class="post-metadata">

**Author:** ![mwq27](https://avatars.discourse-cdn.com/v4/letter/m/5e9695/32.png) [@mwq27](https://community.sendbird.com/u/mwq27)\
**Post date:** [March 11, 2021, 6:43pm UTC](https://community.sendbird.com/t/is-it-possible-to-use-mentions-with-the-channel-component/1854/3 "2021-03-11T18:43:52Z")

</div>

Gotcha. I wasn’t sure if I could just `@username` someone in the Channel’s input field. It looks like we can do that, I would just have to provide the @tagging functionality myself, right?

---

<div class="post-metadata">

**Author:** ![Tyler](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/tyler/32/810_2.png) [@Tyler](https://community.sendbird.com/u/Tyler)\
**Post date:** [March 11, 2021, 6:46pm UTC](https://community.sendbird.com/t/is-it-possible-to-use-mentions-with-the-channel-component/1854/4 "2021-03-11T18:46:49Z")

</div>

That would be correct. You’d have to build in that functionality using getSendUserMessage. So like if a user @'s someone, then you add the mention parameter to the message.

Something along those lines. Also, in case you were not aware, we’re open sourcing our UIKit around the end of Q1. Just an FYI there.

---

<div class="post-metadata">

**Author:** ![mwq27](https://avatars.discourse-cdn.com/v4/letter/m/5e9695/32.png) [@mwq27](https://community.sendbird.com/u/mwq27)\
**Post date:** [March 11, 2021, 6:48pm UTC](https://community.sendbird.com/t/is-it-possible-to-use-mentions-with-the-channel-component/1854/5 "2021-03-11T18:48:26Z")

</div>

Great, that’s awesome to hear. Thank you

---

<div class="post-metadata">

**Author:** ![mwq27](https://avatars.discourse-cdn.com/v4/letter/m/5e9695/32.png) [@mwq27](https://community.sendbird.com/u/mwq27)\
**Post date:** [April 29, 2021, 4:13pm UTC](https://community.sendbird.com/t/is-it-possible-to-use-mentions-with-the-channel-component/1854/6 "2021-04-29T16:13:05Z")

</div>

Hi @Tyler, was wondering if the UIKit has been open-sourced yet.

Thanks

---

<div class="post-metadata">

**Author:** ![Tyler](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/tyler/32/810_2.png) [@Tyler](https://community.sendbird.com/u/Tyler)\
**Post date:** [April 29, 2021, 4:30pm UTC](https://community.sendbird.com/t/is-it-possible-to-use-mentions-with-the-channel-component/1854/7 "2021-04-29T16:30:12Z")

</div>

Hey @mwq27,

It is actually! You can see it here: [GitHub - sendbird/sendbird-uikit-ios-sources: Build chat in minutes with Sendbird UIKit open source code and samples.](https://github.com/sendbird/sendbird-uikit-ios-sources)