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!
As per the doc, Not all browsers support this attribute. Verify the doc whether the browser in which you work supports that attribute.
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)
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 react#16.0.0 react-dom#16.0.0
<html translate="no">
you can basically do this at the top of your html file
Related
I have a question regarding the use of a plugin that I created, and used in an application called HRnet (React 18).
I have no warning in development on the plugin side. But in development on the application side I always have this warning from the bundle.js (but not in production):
It's related to my plugin (no more warning when I comment my plugin), but I don't understand why.
My plugin is a dropdown, it is published on NPM, for the bundler I used Rollup, and lifting state up to pass the value.
NPM
plugin: https://www.npmjs.com/package/react-dropdown-component-library
CodeSandbox (updated)
Dropdown (plugin): https://codesandbox.io/s/dropdown-pybhpn?file=/src/lib/index.tsx
HRNet (app): https://codesandbox.io/s/hrnet-9xq0qv?file=/src/components/AddUseForm/index.tsx:8850-8851
This is probably because register from react-hook-form returns a ref, and it is required by that library that the component it is attached to connects it to the actual form node.
However your dropdown is custom and doesn't use a base HTML element so you need to just not attach it instead. See https://react-hook-form.com/faqs/#Whatifyoudonthaveaccesstoref
So I need to update react, react-dom in order to update nextjs version to 11. React docs says that the new jsx transform approach is backwards compatible, though I met such problem after updating to react 17.0.2. Any file using jsx fails to compile with Can't resolve 'react/jsx-dev-runtime', no matter if I leave the import React from 'react', or remove it as intended after updating to react ^17.
I tried updating #babel/preset-react, using latest #babel/plugin-transform-react-jsx, same problem. The only thing I've found in a similar question topic here is adding /** #jsxRuntime classic */ to the top of the file, which obviously doesnt solve the problem for the whole application (perhaps there might be a way to make such directive global but even then - I would like to be able to use the new and more optimised jsx compiling)
Haven't been able to google exactly my case and any existing suggestions for similar cases didn't help.
To summarise - I need to either make my app work without importing react itself (https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) or at least to be able to use the old way of jsx compiling with this new react version.
Any thoughts?
I'm using the react-ckeditor in project this is load ok.
but I need to use ckeditor full version as editor in the page
how could I use react-ckeditor full version not the standard version?
From the documentation:
By default, the CKEditor 4 React component loads the standard preset of the latest CKEditor 4 release from the CDN when creating the first editor. This behavior can be altered by changing the value of the CKEditor.editorUrl variable to point to the desired CKEditor script location:
CKEditor.editorUrl = 'https://your-website.example/ckeditor/ckeditor.js';
A zip file can be downloaded from https://ckeditor.com/ckeditor-4/download/ and upzipped inside your source code (e.g. inside public/ckeditor-4 folder if using create-react app).
I was also facing the same issue as I wanted to include all the available options in my toolbar. Turns out all you need to do is mention the type of distribution in your CDN link as full-all, to include full preset together with all other plugins created by CKSource.
I changed it from standard to full-all in my CDN link as given below-
<script src="https://cdn.ckeditor.com/4.16.0/full-all/ckeditor.js"></script>
Also, check the version. This is my source of info: https://cdn.ckeditor.com/
Hope this helps :)
have very simple sample app which build Create React App + Styled-Components to prove this issue. But I have real big application which I am facing this issue which I am going to explain it below.
I would like to pre-render this app with Rendertron for SEO/GoogleBots and etc. But the problem is when I build PRODUCTION version of React App which use Styled-Components . all the style will be missing on static version which Rendertron produced, but from other side if I try the same workflow with dev-server of app , everything looks fine .
So far I know there is different on PROD version and DEV version of my application when I render it with Rendertron . But I am not sure what cause this issue and how I can fix this issue .
I am looking for solution or idea which can help me to solve this issue .
Here is my sample code which I peppered for test .
https://github.com/AJ-7885/test-styled-component-with-rendertron
Here is screen shot from different version of Rendered version by Rendertron base on PROD or DEV version of the same application .
enter image description here
After a lot of searching around, I finally found out the reason. The Styled Components library uses something called the "Speedy mode" to inject styles on production. This makes the styles bypass the DOM` and be injected directly inside the CSSOM, thus, appearing in the inspector, but totally invisible on the DOM.
Fortunately, Styled Components 4.1.0 came with a fix for this issue! Now you can set a global variable called SC_DISABLE_SPEEDY to true in order to disable the Speedy mode and get the styles to appear on Production as well.
Reference: https://www.styled-components.com/releases#v4.1.0
But the only part I am not sure , how to set disable this Speedy Mode in Create-React-App without Ejecting , Dose any body has any idea ?
You need to render your styles on the server side and inject those styles in your pre-rendered react app. Styled-components explains how to do that here: https://www.styled-components.com/docs/advanced#server-side-rendering
Also, I'd recommend using react-snap for pre-rendering since that is recommended by the Create React App docs. react-snap seems to be more of a React-specific solution that may be easier to implement, especially with styled-components.
I installed all recommended extensions, still VSCode won't recognize any React syntax.
What must i do to make VSCode play nice with React (js / jsx) syntax?
The plugin that was causing issues for me here actually Babel ES6/ES7 as mentioned in another comment.
Once removing that plugin and reloading, it all worked well
VS Code has built-in support for JSX and TSX. You do not need to install any extensions unless you want additional functionality
As the OP noted, the problem was one of their extensions was inserting spaces around the tags. I suspect it was the js css html formatter extensions since this has caused problem for people in the past
1.Delete all html-js-css formatters.
2.If you want to work with this formatters,
install prettier.
Right click and select format document with and then select prettier. Repeat this every saving.
This happens because you use some HTML formatter, so first go to your react native or js extension settings(simple click the bottom bar language mod), and check the HTML fomatter in that setting page.
"[html]": {
"editor.defaultFormatter": "apility.beautify-blade"
}
remove this, and you are good to go.
Afaik, vscode does not understand JSX by default. Installing jsx plugin should help there.
Install Babel ES6/ES7 extension from here.
Works like charm.