react-helmet-async icon indicating copy to clipboard operation
react-helmet-async copied to clipboard

Feature Request: Append content to body tag attributes via Helmet

Open slorber opened this issue 3 years ago • 2 comments

This is basically a request for the same feature that was requested in the original repo (https://github.com/nfl/react-helmet/issues/365) and is unlikely to be implemented here.

<>
	  <Helmet>
	    <body className='first-class' />
	  </Helmet>
	  <Helmet>
	    <body className='second-class' />
	  </Helmet>
</>

Should lead to <body className='first-class second-class'> and not <body className='second-class'>

I was wondering if this is something that could be implemented or if we should find another userland solution to handle that.

I can probably have multiple layers of <ApplyHtmlClassName> components, but if I can avoid it's better

slorber avatar Mar 17 '22 17:03 slorber

Wouldn't this be out of scope for a component that's role is to amend the head of a dom?

jafin avatar Apr 11 '22 22:04 jafin

For anyone who comes across this, the easy way to handle this is useEffect:

useEffect(() => {
    document.body.classList.add('.my-class');
    return  () => document.body.classList.remove('.my-class');
}, []):

This will add the class when a given component mounts and remove it when it dismounts. You can use a similar pattern for any other DOM manipulation.

doug-stewart avatar Sep 27 '22 00:09 doug-stewart