floating-ui-solid
v1.0.50
Published
Floating UI Primitives for SolidJS
Downloads
413
Maintainers
Readme
floating-ui-solid
Why choose floating-ui-solid?
- 📦 Smaller bundle size
- 🧹 Proper cleanup: cleanup function with autoUpdate is properly handled
- 💪 Improved TypeScript support
- 🤖 Better API
Installation
Choose your preferred package manager:
npm install floating-ui-solid
# or
yarn add floating-ui-solid
# or
pnpm add floating-ui-solid
# or
bun add floating-ui-solid
Usage
Here's a basic example of how to use floating-ui-solid:
import { createSignal } from 'solid-js';
import { useFloating } from 'floating-ui-solid';
export default function App() {
const [isOpen, setIsOpen] = createSignal(false);
const { refs, floatingStyles } = useFloating({
placement: "bottom",
isOpen: isOpen,
strategy: "absolute",
});
return (
<main>
<div
ref={refs.setReference}
onMouseEnter={() => setIsOpen(true)}
onMouseLeave={() => setIsOpen(false)}
class="reference"
>
Hover me
</div>
{isOpen() && (
<div
ref={refs.setFloating}
style={...floatingStyles()}
class="floating"
>
Floating
</div>
)}
</main>
);
}
Using autoUpdate
To keep the floating element positioned correctly when the reference element changes, use the autoUpdate
function:
import { autoUpdate, useFloating } from 'floating-ui-solid';
const { refs, floatingStyles } = useFloating({
placement: "bottom",
isOpen: isOpen,
strategy: "absolute",
whileElementsMounted: autoUpdate,
// or for more control:
whileElementsMounted: (reference, floating, update) => {
const cleanup = autoUpdate(reference, floating, update, { elementResize: true });
return cleanup;
},
});
Applying Custom Styles
You can apply custom styles to the floating element using middleware:
import { autoUpdate, useFloating, size, offset } from 'floating-ui-solid';
const [reactiveMiddleware, setReactiveMiddleware] = createSignal([
offset(10),
size({
apply({ availableHeight }) {
setFloatingStyles({ ...floatingStyles(), "max-height": `${availableHeight}px` });
}
})
]);
const { refs, floatingStyles, setFloatingStyles } = useFloating({
placement: "bottom",
isOpen: isOpen,
strategy: "absolute",
middleware: reactiveMiddleware,
});
Arrow Element
import { autoUpdate, useFloating, arrow } from 'floating-ui-solid';
const [reactiveMiddleware, setReactiveMiddleware] = createSignal([]);
const { refs, floatingStyles, setFloatingStyles } = useFloating({
placement: "bottom",
isOpen: isOpen,
strategy: "absolute",
middleware: reactiveMiddleware,
});
return (
<div>
<div
onMouseEnter={() => setIsOpen(true)}
onMouseLeave={() => setIsOpen(false)}
class="reference"
ref={refs.setReference}
>
Reference
</div>
{isOpen() && (
<div class="floating" style={{ ...floatingStyles() }} ref={refs.setFloating}>
Floating
<div
class="arrow"
style={{
position: 'absolute',
left: middleware()?.arrow?.x != null ? `${middleware().arrow?.x}px` : '',
top: arrowState()?.offsetHeight != null ? `${-arrowState()?.offsetHeight! / 2}px` : '',
}}
ref={(node) => {
setArrow(node)
setReactiveMiddleware((prev) => [...prev, arrow({ element: node })]); // set it once it's ready
}}
></div>
</div>
)}
</div>
)
License
This project is licensed under the MIT License.