search

ycs77 / headlessui-float

Easily use Headless UI with Floating UI to position floating elements.
https://headlessui-float.vercel.app
MIT License
344 stars 11 forks source link

Hydration fix for Next.js #44

Closed doseofted closed 1 year ago

doseofted commented 1 year ago

Using Next.js, a hydration error is given when using the library. A part of the error:

Warning: Prop `style` did not match. Server: "position:absolute;z-index:9999;top:0;left:0;right:auto;bottom:auto;transform:translate(0px,0px)" Client: "position:absolute;z-index:9999;top:0;left:0;right:auto;bottom:auto;transform:translate(0px,0px);width:"
    at div
    at span
    at eval
...

The width style is now set to undefined so client hydration matches server. This resolves the error in Next.js.

Also, love the library! It has saved me a bunch of time setting up Headless UI / Floating UI.

ycs77 commented 1 year ago

@doseofted Thanks for the PR~

ycs77 commented 1 year ago

Released v0.11 contains this.