Add a class to the HTML tag with React?

Question

I'm making a modal in my React project that requires a class to be added to the body when the modal is open and removed when it is closed.

I could do this the old jQuery way by running some vanilla JavaScript which adds / removes a class, however this doesn't feel like the normal React philosophy.

Should I instead setState on my top level component to say whether the modal is open or closed? Even if I did this, as it's rendered into the div on the page it's still a side-effect to edit the body element, so is there any benefit for this extra wiring?

It might help to have a top-level container instead of directly manipulating the body tag. — Brian, Dec 08 '17 at 02:42
I prefer `some vanilla javascript`, you can add class in `componentDidMount` and remove in `componentWillUnmount`, `mousewheel` is global and not `React philosophy`, still you use it — Josh Lin, Dec 08 '17 at 03:27
Possible duplicate of [How to add or remove a className on event in ReactJS](https://stackoverflow.com/questions/28732253/how-to-add-or-remove-a-classname-on-event-in-reactjs) — garrettmac, Nov 07 '18 at 18:32

score 140 · Accepted Answer · answered Dec 08 '17 at 04:02

TL;DR use document.body.classList.add and document.body.classList.remove

I would have two functions that toggle a piece of state to show/hide the modal within your outer component.

Inside these functions I would use the document.body.classList.add and document.body.classList.remove methods to manipulate the body class dependant on the modal's state like below:

openModal = (event) => {
  document.body.classList.add('modal-open');
  this.setState({ showModal: true });
}
hideModal = (event) => {
  document.body.classList.remove('modal-open');
  this.setState({ showModal: false });
}

score 47 · Answer 2 · edited May 07 '19 at 02:07

47

With the new React (16.8) this can be solved with hooks:

import {useEffect} from 'react';

const addBodyClass = className => document.body.classList.add(className);
const removeBodyClass = className => document.body.classList.remove(className);

export default function useBodyClass(className) {
    useEffect(
        () => {
            // Set up
            className instanceof Array ? className.map(addBodyClass) : addBodyClass(className);

            // Clean up
            return () => {
                className instanceof Array
                    ? className.map(removeBodyClass)
                    : removeBodyClass(className);
            };
        },
        [className]
    );
}

then, in the component

export const Sidebar = ({position = 'left', children}) => {
    useBodyClass(`page--sidebar-${position}`);
    return (
        <aside className="...">
            {children}
        </aside>
    );
};

edited May 07 '19 at 02:07

Viesturs Knopkens

594
1
8
16

answered Apr 05 '19 at 14:02

Lukas Kral

987
13
22

4

16.8, not 16.9 :) – Viesturs Knopkens May 06 '19 at 19:07
This doesn't remove the previous body class on navigation for me. Every page component that mounts just adds the class to the body – user3869231 Apr 26 '21 at 21:55
@user3869231 not sure where the problem might be but for me it seems to be working fine, see https://codesandbox.io/s/usebodyclass-v59mkt?file=/src/App.js – Lukas Kral Mar 11 '22 at 18:57

Bojan Mitic · Answer 3 · 2021-03-19T08:02:40.317

28

Actually you don't need 2 functions for opening and closing, you could use document.body.classList.toggle

const [isOpen, setIsOpen] = useState(false)
useEffect(() => {
  document.body.classList.toggle('modal-open', isOpen);
},[isOpen])
    
<button onCLick={()=> setIsOpen(!isOpen)}>Toggle Modal</button>

edited Mar 19 '21 at 08:02

answered Sep 17 '20 at 09:23

Bojan Mitic

462
5
12

1

Replace isMobileOpen with isOpen: `document.body.classList.toggle('modal-open', isOpen);` – TheBosti Mar 19 '21 at 01:02
4

I would also add a cleanup function `return () => document.body.classList.remove('modal-open')` within the useEffect hook. – Yuya Aug 20 '21 at 14:41

score 1 · Answer 4 · answered Dec 08 '17 at 03:14

Like what @brian mentioned, try having a top-level container component that wraps around your other components. (assuming you're not using redux in your app)

In this top-level component:

Add a boolean state (eg. modalOpen) to toggle the CSS class
Add methods (eg. handleOpenModal & handleCloseModal) to modify the boolean state.
Pass the methods created above as props into your <Modal /> component

score -7 · Answer 5 · answered Dec 08 '17 at 03:42

-7

ReactJS has an official React Modal component, I would just use that: https://github.com/reactjs/react-modal

answered Dec 08 '17 at 03:42

swyx

2,378
5
24
39

Add a class to the HTML tag with React?

5 Answers5

Linked