React-helmet: [Question] Is there any way to manage application body classes with Helmet?
Title ^
mmmeff
All 16 comments
No, sorry, Helmet is meant to manage your document head. I assume you are referring to classes on the body tag? - <body class="application test"> ...
cwelch5
on 10 Oct 2016
Bummer. Helmet would be perfect for such a thing.
mmmeff
on 10 Oct 2016
Actually this could be something we consider, we did open up attributes for the html tag. We could extend it to support body attributes. Great idea. Curious, do you have a particular use case?
cwelch5
on 11 Oct 2016
Lots! Body classes are an awesome way to control core layout changes of an application. For example, I have a few pages of my app that need a full-screen header treatment instead of a singular centered-column. For example, the user can switch from a search results list to a search results map view - a much more full-screen layout.
The page component I wrote is extended by each page, and part of the constructor involves calling super(props, ['fullscreen-header']) where the Page component applies these classes to body during ComponentDidMount (amongst many other things).
It's a workable solution, but I'd love to get these body classes integrated into my server-side rendering to avoid the split second where the body class isn't applied on load. Doing so would require me to rework a solution that would ideally be similar to how we're using Helmet for meta/title information, but I'd hate to reinvent the wheel there.
I suppose I could use attributes to achieve this instead of body classes though
mmmeff
on 11 Oct 2016
@mmmeff I think you are correct about using attributes or potentially serving a different style sheet per the layout that you want.
For now, we'd like to keep this library focused mainly on the document head. Thanks.
cwelch5
on 4 Nov 2016
Just thought I'd mention that I was interested in this feature as well for the same reason (applying classes to the body element to swap to a full screen mode).
jmatsushita
on 11 Nov 2016
I'll add myself to the queue of people interested in setting body classNames.
codepunkt
on 13 Jan 2017
Helmet now supports classes to <html>, does that work for you? @codepunkt
cwelch5
on 13 Jan 2017
Amazing, that should work! Thanks @cwelch5!
How do you do it, using the htmlAttributes?
codepunkt
on 13 Jan 2017
馃憤
cwelch5
on 13 Jan 2017
Was looking for something for this and came across this: https://www.npmjs.com/package/react-body-classname
Might be helpful. :)
stefvhuynh
on 20 Jan 2017
@stefvhuynh If i absolutely had to use body classNames, that would probably be a good option. As i was using react-helmet anyway, i switched to setting html classNames using htmlAttributes so that i wouldn't need another dependency.
codepunkt
on 20 Jan 2017
@codepunkt, yeah that makes sense. In my situation, the body class was necessary as it was a transition project, so I ended up using my own version of the package I pointed to with some modifications.
stefvhuynh
on 21 Jan 2017
Was looking for something for this and came across this: https://www.npmjs.com/package/react-body-classname
@stefvhuynh Careful with that one, make sure you call rewind, otherwise you'll get a BIG memory leak:
Important: This component keeps track of mounted instances, so if you don't call BodyClassName.rewind() you'll get a memory leak.
Richacinas
on 2 Feb 2018
There is at this point (for quite a while now but apparently not at the time this thread was active) a bodyAttributes attribute to the main Helmet object, so you can add classes to the body for a particular page. https://github.com/nfl/react-helmet/blob/2aecac5d0df4bc208fb11394e867b1b1ddcd5a5f/src/Helmet.js#L35
liamhession
on 23 Sep 2020
And strangely enough, i found that for it to work right when running my site with gatsby develop, i needed to pass it in like:
bodyAttributes={{ class: 'landing-page-body' }}
instead of saying className as you'd expect to do based on the comments in react-helmet. And using class instead also works when the site is built by Gatsby, so that's what i'm going with
liamhession
on 24 Sep 2020
Related issues
brianespinosa
路
3Comments
sneridagh
路
4Comments
joshwcomeau
路
3Comments
namnm
路
4Comments
michaelBenin
路
3Comments
Most helpful comment
Helmet now supports classes to
<html>, does that work for you? @codepunkt