# Showing links within UserMessages in React UIKit

**URL:** https://community.sendbird.com/t/showing-links-within-usermessages-in-react-uikit/348
**Category:** Sendbird Chat UIKit
**Tags:** react-js, uikit
**Created:** [June 1, 2020, 9:26pm UTC](https://community.sendbird.com/t/showing-links-within-usermessages-in-react-uikit/348 "2020-06-01T21:26:43Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![kshipley](https://avatars.discourse-cdn.com/v4/letter/k/e47774/32.png) [@kshipley](https://community.sendbird.com/u/kshipley)
#### Post date: [June 1, 2020, 9:26pm UTC](https://community.sendbird.com/t/showing-links-within-usermessages-in-react-uikit/348/1 "2020-06-01T21:26:43Z")

</div>

We’re working on our first Sendbird-based application and decided to try out the React UIKit to speed things up. Our use case involves a lot of links being sent between users who might be slightly less technical, so we’d like to make it as easy as possible to spot and interact with links.

Right now, if I send a message with `https://www.google.com`, it comes through as the text `https://www.google.com/` instead of turning into a stylized, clickable link like in Slack / Discord / etc. We could override `renderChatItem` and write a custom renderer, but then we’re responsible for overloading a lot of behavior from the base implementation such as file / image previews, day separators, etc. We’d love to reuse as much of your hard work as possible and just override this one case for link rendering.

From digging through the source code of the `sendbird-uikit` React library, it looks like there is a `MessageHOC` component that handles the more complex rendering logic, but it’s not currently exported, so I assume it’s an internal-only API. I also see methods like `messageListQuery` and `onMessageReceived`, but I don’t see ways to override those at the moment.

Is there a way for us to only override rendering for messages that contain links? Or some way to pre-process messages and replace text with links as appropriate? Or do we need to write our own rendering engine using `renderChatItem` just to enable this one case?

Thanks!

---

<div class="post-metadata">

### Author: ![Sravan\_S](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/sravan_s/32/83_2.png) [@Sravan\_S](https://community.sendbird.com/u/Sravan_S)
#### Post date: [June 4, 2020, 1:52am UTC](https://community.sendbird.com/t/showing-links-within-usermessages-in-react-uikit/348/2 "2020-06-04T01:52:28Z")

</div>

Hi [kshipley](https://community.sendbird.com/u/kshipley), sorry for replying a little late  
For now, you will have to write your own rendering engine using `renderChatItem` ☹  
But, let me discuss with other engineers and see if we can find a work around for this and get back to you in a day or two

Good news is, we have the implementation of unfurling of links (internally we call it OG tag) planned, for early Q3

---

<div class="post-metadata">

### Author: ![kshipley](https://avatars.discourse-cdn.com/v4/letter/k/e47774/32.png) [@kshipley](https://community.sendbird.com/u/kshipley)
#### Post date: [June 4, 2020, 2:16pm UTC](https://community.sendbird.com/t/showing-links-within-usermessages-in-react-uikit/348/3 "2020-06-04T14:16:26Z")

</div>

No worries, appreciate the response! Hoping for good news in the next couple days, but otherwise we’ll plan to start working on some rendering stuff next week. Thanks!

---

<div class="post-metadata">

### Author: ![Sravan\_S](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/sravan_s/32/83_2.png) [@Sravan\_S](https://community.sendbird.com/u/Sravan_S)
#### Post date: [June 8, 2020, 1:10am UTC](https://community.sendbird.com/t/showing-links-within-usermessages-in-react-uikit/348/4 "2020-06-08T01:10:13Z")

</div>

@kshipley I checked and sadly there is no quick workaround available for now ☹

---

<div class="post-metadata">

### Author: ![kshipley](https://avatars.discourse-cdn.com/v4/letter/k/e47774/32.png) [@kshipley](https://community.sendbird.com/u/kshipley)
#### Post date: [June 8, 2020, 6:13pm UTC](https://community.sendbird.com/t/showing-links-within-usermessages-in-react-uikit/348/5 "2020-06-08T18:13:44Z")

</div>

Thanks for the follow-up! If nothing else, this will help us make the appropriate tradeoffs over the next few weeks.

Best of luck with the link unfurling feature you’re working on! 🙂

---

<div class="post-metadata">

### Author: ![jules](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/jules/32/4242_2.png) [@jules](https://community.sendbird.com/u/jules)
#### Post date: [July 3, 2023, 2:24pm UTC](https://community.sendbird.com/t/showing-links-within-usermessages-in-react-uikit/348/6 "2023-07-03T14:24:04Z")

</div>

Hi @Sravan_S any chance there’s a workaround for this?

I’m using React UIKit to allow users chat/communicate with each other.

When users want to send a message containing a link to a group, I want users to be able to see the preview link before sending the message. Can this be achieved using React UIKit? I can’t seem to find an inbuilt solution for this. And the `renderChatItem` prop isn’t available for me to use.
