# How to enabled translation using react UI Kit

**URL:** <https://community.sendbird.com/t/how-to-enabled-translation-using-react-ui-kit/680>\
**Category:** React\
**Tags:** javascript\
**Created:** [July 21, 2020, 6:39pm UTC](https://community.sendbird.com/t/how-to-enabled-translation-using-react-ui-kit/680 "2020-07-21T18:39:59Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![sreedharbukya](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/sreedharbukya/32/366_2.png) [@sreedharbukya](https://community.sendbird.com/u/sreedharbukya)\
**Post date:** [July 21, 2020, 6:39pm UTC](https://community.sendbird.com/t/how-to-enabled-translation-using-react-ui-kit/680/1 "2020-07-21T18:39:59Z")

</div>

Please state the version of UIKit & OS you are using when creating a topic  
and select the related tags

How to send translation in react UI Kit?

If I would like to send all my messages to translate while sending to user. Is there a way to do it directly?

How to retrieve it directly from ui-kit??

---

<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:** [July 22, 2020, 1:28am UTC](https://community.sendbird.com/t/how-to-enabled-translation-using-react-ui-kit/680/2 "2020-07-22T01:28:32Z")

</div>

Hello @sreedharbukya  
Can you explain your exact use case so that we can help you

Are you trying to use the auto translation feature? [https://docs.sendbird.com/javascript/group\_channel\_advanced#3\_message\_auto\_translation](https://docs.sendbird.com/javascript/group_channel_advanced#3_message_auto_translation)

---

<div class="post-metadata">

**Author:** ![Jason](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/jason/32/488_2.png) [@Jason](https://community.sendbird.com/u/Jason)\
**Post date:** [July 24, 2020, 4:33am UTC](https://community.sendbird.com/t/how-to-enabled-translation-using-react-ui-kit/680/3 "2020-07-24T04:33:40Z")

</div>

@sreedharbukya Sendbird has a fully automated translation service. Although this service is expensive it can work by setting your user’s language preferences. After that Sendbird will automatically take care of everything.

If you need less expensive solutions @Sravan_S will be able to help. The attached document defines the three different types of translation abilities Sendbird has.

@Sravan_S Is the go to person for JS UI Kit, I just wanted to help define what translation means at Sendbird. 🙂

[[SendBird] Translation - External (1).pdf](https://community.sendbird.com/uploads/short-url/qJBf42jNClzjCWSMqOsf9TQncOu.pdf) (90.0 KB)

---

<div class="post-metadata">

**Author:** ![sreedharbukya](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/sreedharbukya/32/366_2.png) [@sreedharbukya](https://community.sendbird.com/u/sreedharbukya)\
**Post date:** [July 25, 2020, 1:30pm UTC](https://community.sendbird.com/t/how-to-enabled-translation-using-react-ui-kit/680/4 "2020-07-25T13:30:27Z")

</div>

Thank you @Jason. I will follow up with the @Sravan_S for this.

---

<div class="post-metadata">

**Author:** ![sreedharbukya](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/sreedharbukya/32/366_2.png) [@sreedharbukya](https://community.sendbird.com/u/sreedharbukya)\
**Post date:** [July 27, 2020, 2:09pm UTC](https://community.sendbird.com/t/how-to-enabled-translation-using-react-ui-kit/680/5 "2020-07-27T14:09:55Z")

</div>

@Jason, @Sravan_S, we are using Pro 5K plan for our application already. Does that changes the pricing if we implement auto translation?

If we set a user A to have Chinese Simplified as language preference and User B as English.

When we are using sendbird uikit (React) shows the messages in their preferred language?

Is there any built in function / extend which will allow to translate single message on click just like wechat feature?

---

<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:** [July 28, 2020, 1:34am UTC](https://community.sendbird.com/t/how-to-enabled-translation-using-react-ui-kit/680/6 "2020-07-28T01:34:30Z")

</div>

@sreedharbukya Translation services were not on our roadmap when we started implementing UIKit. I will communicate this to our product managers. Anyways, let me do some research and see if there is a work around that is possible to implement this feature(`Is there any built in function / extend which will allow to translate single message on click just like wechat feature?`)

I will check and get back to you

---

<div class="post-metadata">

**Author:** ![sreedharbukya](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/sreedharbukya/32/366_2.png) [@sreedharbukya](https://community.sendbird.com/u/sreedharbukya)\
**Post date:** [July 30, 2020, 2:57am UTC](https://community.sendbird.com/t/how-to-enabled-translation-using-react-ui-kit/680/7 "2020-07-30T02:57:25Z")

</div>

@Sravan_S, any update on this feature or ways to extend it from uikit?

---

<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:** [July 30, 2020, 6:07am UTC](https://community.sendbird.com/t/how-to-enabled-translation-using-react-ui-kit/680/8 "2020-07-30T06:07:41Z")

</div>

Hello @sreedharbukya

This is a sample for on-demand translation  
[https://codesandbox.io/s/translation-2g5xg?fontsize=14&hidenavigation=1&theme=dark](https://codesandbox.io/s/translation-2g5xg?fontsize=14&hidenavigation=1&theme=dark)

The translation action can be found here

> **[Translation - CodeSandbox](https://codesandbox.io/s/translation-2g5xg?file=%2Fsrc%2FCustomizedApp.js:754-796)**
>
> Translation by sravan-s using @material-ui/core, @material-ui/lab, @material-ui/styles, moment, prop-types, react, react-dom, react-scripts, sendbird

The implementation of onclick can be found here

> **[Translation - CodeSandbox](https://codesandbox.io/s/translation-2g5xg?file=%2Fsrc%2FCustomizedMessageItems%2FUserMessage.js:3366-3422)**
>
> Translation by sravan-s using @material-ui/core, @material-ui/lab, @material-ui/styles, moment, prop-types, react, react-dom, react-scripts, sendbird

* * *

Footnote:-  
Translation is a premium feature. Make sure you have it enabled  
And, enter your APPID in [https://codesandbox.io/s/translation-2g5xg?file=/src/const.js](https://codesandbox.io/s/translation-2g5xg?file=/src/const.js)  
TLDR: We rendered custom MessageItem and called translation on demand on a button click
