Menu
What is the best way to manipulate the <html> or <body> tags in React?
For example, dynamically setting 'lang' attribute or change classes?
<html lang="en" class="ltr"> I could do that using raw DOM manipulation. But is this the right way?
913
To add a class to the body element in React: Access the body element as document. body in useEffect or an event handler.
By default, React does not permit you to inject HTML in a component, for various reasons including cross-site scripting. However, for some cases like a CMS or WYSIWYG editor, you have to deal with raw HTML.
It's ok to change the lang property directly and you may do so changing the value of document.documentElement.lang
For example:
var newLang = 'fr'; ... document.documentElement.lang = newLang; // will set the lang property to 'fr' I've just encountered this use case where I want to modify the <html> lang attribute when language is switched by the user.
React Helmet made this quite simple actually.
Just get the lang from your react state and pass it to the Helmet component anywhere in your app:
<Helmet htmlAttributes={{ lang : this.state.lang }}/> // with this.state = { lang : 'en' } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
