Feature Request: Append content to body tag attributes via Helmet #365

jeffredodd · 2018-03-23T16:41:04Z

When using react Helmet, I would like a way to append content into my attributes onto my <body> tag.

For example this code will set my body class ...
JSX

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

Output
<body class='first-class'>

And when I have a component deeper in my application call helmet like such the body class is overwritten...

JSX

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

Output
<body class='second-class'>

Desired Output
<body class='first-class second-class'>

Currently the fix for this in my application is to call the following which is not sustainable as we now have to maintain many body classes throughout our application...
JSX

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

Potential Solution
In order to set this up correctly you cannot call class but maybe using something like the following would be an appropriate way to append an item to helmet as calling class directly should still overwrite class so that a breaking change is not introduced to helmet?

JSX

<Helmet>
  <body append-class='second-class' />
</Helmet>

The text was updated successfully, but these errors were encountered:

andrewbusch7 · 2018-06-12T06:28:04Z

Isn't this creeping beyond the scope of react-helmet? Helmet i.e. head?

sneridagh · 2018-07-24T18:04:06Z

+1

panzerdp · 2018-10-10T13:15:46Z

While react-helmet does not support appending classes, you can simply add new attributes to your body tag. Then use those attributes as selectors.

E.g.:

<App>
  <Helmet>
    <body data-first="true" />
  </Helmet>
  <Helmet>
    <body data-second="true" />
  </Helmet>
</App>

The output will be:

<body data-first="true" data-second="true" />

Then use attribute selectors:

body[data-first] {
  color: blue;
}

body[data-second] {
  color: red;
}

Noyabronok · 2018-11-09T17:28:23Z

We have a 3rd party script adding classes to the body tag, but Helmet is overwriting them . Why is appending classes not supported?

tmbtech · 2018-11-09T18:07:52Z

We have a 3rd party script adding classes to the body tag, but Helmet is overwriting them . Why is appending classes not supported?

The typical and recommended approach is to not wrap the entire body but to use helmet as a sibling to the body.

ie

<div className="application">
    <Helmet>
        <meta charSet="utf-8" />
    </Helmet>
    <body>.....</body>
</div>

https://github.com/nfl/react-helmet#as-react-components

I could be misunderstanding the issue, let me know if that helps.

Noyabronok · 2018-11-09T18:40:45Z

@tmbtech We're using react strictly client side, and Helmet to add some data attributes and update className='...' to an existing body tag.
If I understand correctly, your example applies to server side render, which is a different use case.

tmbtech · 2018-11-09T19:51:47Z

@Noyabronok can you provide an example via https://codesandbox.io

bittu · 2019-10-15T10:57:23Z

bump!!!
@Noyabronok example please.
@jeffredodd @tmbtech were you able to achieve this?

Edit:
Figured it...
Helmet.peek() on clients-side gives the Helmet props

  const { bodyAttributes } = Helmet.peek()

// render...
  <Helmet>
      <body className={cn(bodyAttributes.class, styles.bodySlide)} />
  </Helmet>

jeffredodd · 2019-10-15T19:30:38Z

@bittu This task was for a former project but I heard they made quite a bit of progress with this in our UI platform by using https://github.com/staylor/react-helmet-async .

bittu · 2019-10-16T09:14:47Z

@jeffredodd Ah ok... https://github.com/staylor/react-helmet-async is this package for SSR only or client-side rendering as well?

javierguzman · 2021-10-03T05:03:30Z

Hello all, I am looking for placing a noscript snippet within body. Is there a way to achieve this with react-helmet? Thank you in advance

IPRIT · 2022-01-13T16:10:44Z

Any updates? Still actual.

jeffredodd · 2022-01-14T03:35:35Z

Closing as React has changed a ton in 4 years and this is not a good proposed solution. Plus this repo hasn't received updates in a while.

mfowlewebs mentioned this issue Jul 19, 2018

scripts in the end of body #339

Open

muuvmuuv mentioned this issue Feb 29, 2020

bodyAttributes append classes staylor/react-helmet-async#84

Open

jeffredodd closed this as completed Jan 14, 2022

slorber mentioned this issue Mar 17, 2022

Feature Request: Append content to body tag attributes via Helmet staylor/react-helmet-async#161

Open

tetarchus mentioned this issue Jun 6, 2022

Append content to body tag attributes via Helmet tetarchus/react-helmet-async-ts#37

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature Request: Append content to body tag attributes via Helmet #365

Feature Request: Append content to body tag attributes via Helmet #365

jeffredodd commented Mar 23, 2018 •

edited

Loading

andrewbusch7 commented Jun 12, 2018

sneridagh commented Jul 24, 2018

panzerdp commented Oct 10, 2018

Noyabronok commented Nov 9, 2018

tmbtech commented Nov 9, 2018

Noyabronok commented Nov 9, 2018

tmbtech commented Nov 9, 2018

bittu commented Oct 15, 2019 •

edited

Loading

jeffredodd commented Oct 15, 2019 •

edited

Loading

bittu commented Oct 16, 2019

javierguzman commented Oct 3, 2021

IPRIT commented Jan 13, 2022

jeffredodd commented Jan 14, 2022

Feature Request: Append content to body tag attributes via Helmet #365

Feature Request: Append content to body tag attributes via Helmet #365

Comments

jeffredodd commented Mar 23, 2018 • edited Loading

andrewbusch7 commented Jun 12, 2018

sneridagh commented Jul 24, 2018

panzerdp commented Oct 10, 2018

Noyabronok commented Nov 9, 2018

tmbtech commented Nov 9, 2018

Noyabronok commented Nov 9, 2018

tmbtech commented Nov 9, 2018

bittu commented Oct 15, 2019 • edited Loading

jeffredodd commented Oct 15, 2019 • edited Loading

bittu commented Oct 16, 2019

javierguzman commented Oct 3, 2021

IPRIT commented Jan 13, 2022

jeffredodd commented Jan 14, 2022

jeffredodd commented Mar 23, 2018 •

edited

Loading

bittu commented Oct 15, 2019 •

edited

Loading

jeffredodd commented Oct 15, 2019 •

edited

Loading