A useFloating hook providing two attachments

[ixxie]

I've noticed Bits depends on floating UI. This is quite a powerful library, and I've been contemplating writing a hook that transparently exposes their API. The idea is to offer a hook which returns two attachments:

<script> import { offset, flip, shift } from "@floating-ui/dom"; // pass a signal to the hook to allow reactive settings const { anchor, float } = useFloating(() => ({ strategy: "absolute", placement: "top", middleware: [ offset(6), flip(), shift(), ] })) </script> <button onclick={() => doStuff()} {@attach anchor} > <div class="icon settings"></div> </button> <div class="card" {@attach float}> Go to settings </div>

Since attachments can be passed to components this could be quite powerful.

Prior art: a similar hook using actions.

I'd be willing to contribute this hook at some point this autumn if you think its a good idea.

[ixxie]

Bumping this since its been a couple of weeks...

I think offering some hooks could be a nice complement to the excellent components offered by the library.

[huntabyte]

There is a plan for this, just need some more time to work through the API design for this!

[ixxie]

So you wouldn't accept a PR since you wanna do it yourself?