search

vikejs / vike-react

🔨 React integration for Vike
https://vike.dev/vike-react
MIT License
94 stars 15 forks source link

Need a way to add html attributes to the root `<html>` element #103

Closed loteoo closed 3 weeks ago

loteoo commented 4 months ago

First of all, thank you for this great library!

I'm creating this issue to share a hiccup I ran into. I'm using the Mantine-UI library and for the dark mode / light mode to work properly, you need a way to add a data-mantine-color-scheme html attribute to the root HTML element.

Currently, there is no way to manage this with the Head component to modify the html element.

Maybe a solution could look like this:

const Head: React.FC = () => {
  return (
    <>
      <html my-custom-attribute="foo" />
    </>
  )
}

Thank you!

brillout commented 4 months ago

Yes, that's very much on the radar. It's actually something I plan to start implementing today. Depending on how things go, the ETA could be as early as this week — let's see.

In the meantime, you can eject or patch vike-react (it's quite small like 500 LoC).

brillout commented 4 months ago

I'll probably be able to make a pre-release today.

loteoo commented 4 months ago

Woah! Amazing, let me know if I can help! And no rush! :) ❤️

brillout commented 4 months ago

Turns out there is a blocker in Vike core for this, so it's going to take a little longer. (Thanks for sponsoring!)

brillout commented 3 weeks ago

https://vike.dev/htmlAttributes

brillout commented 3 weeks ago

Let us know if anything doesn't work for your use case. We look forward to gathering feedback on the new improvements to head tag management.

loteoo commented 3 weeks ago

Amazing, thank you!