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.