Floating UI を触ってみる

import { offset, useFloating, autoUpdate } from '@floating-ui/react-dom'

const Component = () => {
  const { floatingStyles, refs } = useFloating({
    // 画像を並べたい対象の要素
    elements: {
      reference: referenceElement,
    },
    // 位置の補正
    middleware: [offset({
      crossAxis: position.x,
      mainAxis: position.y,
    })],
    // 対象の要素から見てどの方向に画像を出すか
    placement: block.attributes.position.placement,
    // 画像が読み込まれた時の自動位置補正
    whileElementsMounted: autoUpdate,
  })

  return (
    <div ref={refs.setFloating} style={floatingStyles}>
      {/* 表示したい要素(今回は画像) */}
      {children}
    </div>
  )
}