search

Xiphe / remix-island

utils to render remix into a dom-node instead of the whole document
MIT License
137 stars 8 forks source link

How to add body className? #20

Open MosheZemah opened 1 month ago

MosheZemah commented 1 month ago

Before using remix-island, I was able to add body class from routes like this:

function App() {
...
const matches = useMatches() as UIMatch<unknown, { bodyClass: string }>[];
  const routeBodyClasses = matches
    .filter((match) => match.handle?.bodyClass)
    .map((match) => match.handle?.bodyClass)
    .join(' ');

...
return (
...
<body className={routeBodyClasses}>
...

and in the specific route component:

export const handle: Handler<LoaderData> = {
  bodyClass: 'some-class',
};

Is it possible to also do it now?

MosheZemah commented 1 month ago

I've added the classes using useEffect in root:

useEffect(() => {
    routeBodyClasses.split(' ').forEach((className) => document.body.classList.add(className));
  }, [routeBodyClasses]);