CODEWITHSUNDEEP
reactjstranslate
CoderAz
CoderAz

Reputation: 99

Using "translate" attribute in ReactJS

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!

Upvotes: 2

Views: 2637

Answers (4)

Shubham Khatri
Shubham Khatri

Reputation: 282000

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]

Upvotes: 1

Vivek Doshi
Vivek Doshi

Reputation: 58593

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)

Edit peaceful-khorana-j74bu

Upvotes: 1

Surya
Surya

Reputation: 1091

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

Upvotes: 1

isa_toltar
isa_toltar

Reputation: 594

<html translate="no">

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

Upvotes: 0

Related Questions