https://github.com/lxsmnsyc/solid-floating-ui

SolidJS bindings for Floating UI
https://github.com/lxsmnsyc/solid-floating-ui

floating-ui solid-js

Last synced: about 2 months ago
JSON representation

SolidJS bindings for Floating UI

• Host: GitHub
• URL: https://github.com/lxsmnsyc/solid-floating-ui
• Owner: lxsmnsyc
• License: mit
• Created: 2022-07-19T13:48:08.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-20T13:18:42.000Z (8 months ago)
• Last Synced: 2024-07-19T09:16:26.209Z (2 months ago)
• Topics: floating-ui, solid-js
• Language: TypeScript
• Homepage:
• Size: 315 KB
• Stars: 81
• Watchers: 2
• Forks: 2
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-solid-js - Solid Floating UI

README

        
# solid-floating-ui

> SolidJS bindings for [Floating UI](https://floating-ui.com/). Based on [`@floating-ui/react-dom`](https://floating-ui.com/docs/react-dom)

[![NPM](https://img.shields.io/npm/v/solid-floating-ui.svg)](https://www.npmjs.com/package/solid-floating-ui) [![JavaScript Style Guide](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)

## Install

```bash

npm install --save @floating-ui/dom solid-floating-ui

```

```bash

yarn add @floating-ui/dom solid-floating-ui

```

```bash

pnpm add @floating-ui/dom solid-floating-ui

```

## Usage

```js

import { createSignal } from 'solid-js';

import { useFloating } from 'solid-floating-ui';

function App() {

  const [reference, setReference] = createSignal();

  const [floating, setFloating] = createSignal();

  // `position` is a reactive object.

  const position = useFloating(reference, floating);

 

  return (

    <>

      Button

      


        Tooltip

      

    >

  );

}

```


`position` is based on [`computePosition`'s return value](https://floating-ui.com/docs/computeposition#return-value) has the following fields:

- `x` and `y` are the positioning coords. Initial values are null.

- `strategy` is either `absolute` (default) or `fixed`. Refer to [`strategy` option](https://floating-ui.com/docs/computeposition#strategy)

- `placement` is refers to the [`placement` options](https://floating-ui.com/docs/computeposition#placement)

Middlewares can also be used:

```js

import { useFloating } from 'solid-floating-ui';

import { offset, flip, shift } from '@floating-ui/dom';

const [reference, setReference] = createSignal();

const [floating, setFloating] = createSignal();

useFloating(reference, floating, {

  placement: 'right',

  strategy: 'fixed',

  middleware: [offset(10), flip(), shift()],

});

```

## Updating

`useFloating()` only calculates the position **once** on render, or when the reference/floating elements changed — for example, the floating element gets mounted via conditional rendering.

If the floating element lives in a different `offsetParent` context to the reference element, it will need to be updated while mounted to remain “anchored”. This includes scrolling and resizing the window or the elements themselves.

To do so, use the `autoUpdate` utility:

```js

import { useFloating } from 'solid-floating-ui';

import { autoUpdate } from '@floating-ui/dom';

 

function App() {

  const [reference, setReference] = createSignal();

  const [floating, setFloating] = createSignal();

  useFloating(reference, floating, {

    whileElementsMounted: autoUpdate,

 

    // Or, pass options. Ensure the cleanup function is returned.

    whileElementsMounted: (reference, floating, update) => (

      autoUpdate(reference, floating, update, {

        animationFrame: true,

      }),

    )

  });

}

```

Alternatively (or additionally), you may want to update manually in some cases. The primitive returns an `update()` function to update the position at will:

```js

const position = useFloating();

position.update();

```

### Virtual Elements

See [Virtual Elements](https://floating-ui.com/docs/virtual-elements) for details.

```js

function App() {

  const [floating, setFloating] = createSignal();

  const position = useFloating(

    () => ({

      getBoundingClientRect() {

        return {

          // ...

        };

      },

    }),

    floating,

  );

  return (

    


      Tooltip

    

  );

}

```


## Sponsors

![Sponsors](https://github.com/lxsmnsyc/sponsors/blob/main/sponsors.svg?raw=true)

## License

MIT © [lxsmnsyc](https://github.com/lxsmnsyc)