Octane binding for the complete public contract of react-popper@2.3.0.
pnpm add @octanejs/popper @popperjs/core
import { Manager, Popper, Reference } from '@octanejs/popper';
export function Tooltip() {
return <Manager>
<Reference>{({ ref }) => <button ref={ref}>Anchor</button>}</Reference>
<Popper placement="top">
{({ ref, style, placement, arrowProps }) => <div
ref={ref}
style={style}
data-placement={placement}
>
Tooltip
<div ref={arrowProps.ref} style={arrowProps.style} />
</div>}
</Popper>
</Manager>;
}
usePopper is also available with the same reference, popper, options, state,
styles, attributes, update, and force-update contract as the React package.