Using "translate" attribute in ReactJS

Question

Example:

<h1 translate="no" className="clientName">Jay</h1>

Hi Guys, the code above is in my react project and its apparent that the attribute translate is not working in React

Does anyone know an alternative solution, even through Javascript, as I do not want google to translate the names of people on my site?

Thanks!

I have the same issue. I'll specify that by "not working" I mean, that React ignores this attribute and it's not being rendered in the final html at all. — Matt Leonowicz
– Matt Leonowicz, Commented Jun 22, 2020 at 8:53
@MattLeonowicz, please check the answer, I think that might help you. — Vivek Doshi
– Vivek Doshi, Commented Jun 22, 2020 at 10:32

Surya · Accepted Answer · 2020-05-20 11:31:47Z

1

As per the doc, Not all browsers support this attribute. Verify the doc whether the browser in which you work supports that attribute.

answered May 20, 2020 at 11:31

Surya

1,0914 gold badges18 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vivek Doshi · Accepted Answer · 2020-06-22 10:32:42Z

1

Please check browser support of translate="no" here, not supported by most of then

You can also test the same thing in the browser you want to test : https://j74bu.csb.app/

For specific google translate as alternate solution, you can use className="notranslate"

<h1 className="notranslate">agradável</h1>

WORKING DEMO : (Link to test)

edited Jun 22, 2020 at 10:32

answered Jun 22, 2020 at 10:18

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

Comments

Shubham Khatri · Accepted Answer · 2020-06-22 12:32:16Z

While translate attribute is not supported in a few browsers, I think that issue in your case is that React isn't passing the translate attribute to the DOM element.

This could happen if you are using a version of react older than 16.0.0. Prior to 16.0.0, react would omit custom attributes from being passed to the DOM. In doing so it also did not honour some valid HTML attributes as the valid attribute list is quite huge.

From v16.0.0, react doesn't omit these attributes from being passed to the DOM and hence you would be able to properly use it.

Please check the migration guide for more details

All you need to do is to upgrade your version of react to the latest version using

  yarn upgrade --latest react react-dom

or you can simply try to upgrade to v16.0.0 with

yarn upgrade [email protected] [email protected]

isa_toltar · Accepted Answer · 2020-05-20 11:28:37Z

0

<html translate="no">

you can basically do this at the top of your html file

answered May 20, 2020 at 11:28

isa_toltar

5946 silver badges12 bronze badges

3 Comments

CoderAz Over a year ago

Well, I do want it to translate other sections of the page, just not the names within the page

isa_toltar Over a year ago

@CoderAz you can also try class="notranslate" maybe this one fit for you

CoderAz Over a year ago

thanks for the suggesstion but that didnt work either :s

Collectives™ on Stack Overflow

Using "translate" attribute in ReactJS

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related