React Helmet dynamic classes override each other

Question

I'm trying to set a class conditionally on the body tag. In itself this is trivial and not an issue, but when having multiple components, that conditionally have write to the class attribute of the body tag at the same time, they start overriding each other. Only one of them stays active, while the others just get ignored. Example:

// Sidebar.js

const Sidebar = () => (
  // ...
  <Helmet>
    <body className={menuOpen ? 'blur' : ''} />
  </Helmet>
  // ...
);

// Loader.js

const Loader = () => (
  // ...
  <Helmet>
    <body className={isLoading ? 'hidden' : ''} />
  </Helmet>
  // ...
);

In this example, the sidebar has to disable scrolling (and blur the page, for design purposes) by setting a class on the body tag, when active. The loader needs to disable scrolling while it is active (it is a full-screen preloader). The sidebar component takes the priority here and the Helmet tag in the Loader component is just ignored.

How can I make this work?

Edit: Of course, I could just use the DOM API and set/remove classes manually, which is what I'm doing at the moment, but wondering if there is a more react-way to do this.

score 1 · Accepted Answer · answered Nov 30 '19 at 20:00

1

Maintain an array of the items you want in the class attribute and then use helmet to apply the array

answered Nov 30 '19 at 20:00

David Bradshaw

11,859
3
41
70

But that implies using the Context API or passing down a function through the component tree. Isn't that overkill for simply adding classes? – User3434343443 Nov 30 '19 at 20:14
1

I think this is the perfect use case for the context API – David Bradshaw Nov 30 '19 at 23:11

React Helmet dynamic classes override each other

1 Answers1