{"id":13531854,"url":"https://github.com/lxsmnsyc/solid-floating-ui","last_synced_at":"2025-04-12T19:46:09.414Z","repository":{"id":46736325,"uuid":"515603951","full_name":"lxsmnsyc/solid-floating-ui","owner":"lxsmnsyc","description":"SolidJS bindings for Floating UI","archived":false,"fork":false,"pushed_at":"2025-01-20T13:42:08.000Z","size":328,"stargazers_count":90,"open_issues_count":4,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-04T00:29:50.585Z","etag":null,"topics":["floating-ui","solid-js"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lxsmnsyc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"lxsmnsyc"}},"created_at":"2022-07-19T13:48:08.000Z","updated_at":"2025-03-20T16:06:25.000Z","dependencies_parsed_at":"2025-02-07T03:00:29.048Z","dependency_job_id":"34e51849-9773-4cc1-bdbd-b01016aedce2","html_url":"https://github.com/lxsmnsyc/solid-floating-ui","commit_stats":{"total_commits":16,"total_committers":2,"mean_commits":8.0,"dds":0.0625,"last_synced_commit":"f8f632c6a6e79b2a4543f15102cf88320fb37a72"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Fsolid-floating-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Fsolid-floating-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Fsolid-floating-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Fsolid-floating-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lxsmnsyc","download_url":"https://codeload.github.com/lxsmnsyc/solid-floating-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248625491,"owners_count":21135513,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["floating-ui","solid-js"],"created_at":"2024-08-01T07:01:06.280Z","updated_at":"2025-04-12T19:46:09.375Z","avatar_url":"https://github.com/lxsmnsyc.png","language":"TypeScript","readme":"# solid-floating-ui\n\n\u003e SolidJS bindings for [Floating UI](https://floating-ui.com/). Based on [`@floating-ui/react-dom`](https://floating-ui.com/docs/react-dom)\n\n[![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)\n\n## Install\n\n```bash\nnpm install --save @floating-ui/dom solid-floating-ui\n```\n\n```bash\nyarn add @floating-ui/dom solid-floating-ui\n```\n\n```bash\npnpm add @floating-ui/dom solid-floating-ui\n```\n\n## Usage\n\n```js\nimport { createSignal } from 'solid-js';\nimport { useFloating } from 'solid-floating-ui';\n\nfunction App() {\n  const [reference, setReference] = createSignal();\n  const [floating, setFloating] = createSignal();\n\n  // `position` is a reactive object.\n  const position = useFloating(reference, floating);\n \n  return (\n    \u003c\u003e\n      \u003cbutton ref={setReference}\u003eButton\u003c/button\u003e\n      \u003cdiv\n        ref={setFloating}\n        style={{\n          position: position.strategy,\n          top: `${position.y ?? 0}px`,\n          left: `${position.x ?? 0}px`,\n        }}\n      \u003e\n        Tooltip\n      \u003c/div\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n`position` is based on [`computePosition`'s return value](https://floating-ui.com/docs/computeposition#return-value) has the following fields:\n\n- `x` and `y` are the positioning coords. Initial values are null.\n- `strategy` is either `absolute` (default) or `fixed`. Refer to [`strategy` option](https://floating-ui.com/docs/computeposition#strategy)\n- `placement` is refers to the [`placement` options](https://floating-ui.com/docs/computeposition#placement)\n\nMiddlewares can also be used:\n\n```js\nimport { useFloating } from 'solid-floating-ui';\nimport { offset, flip, shift } from '@floating-ui/dom';\n\nconst [reference, setReference] = createSignal();\nconst [floating, setFloating] = createSignal();\n\nuseFloating(reference, floating, {\n  placement: 'right',\n  strategy: 'fixed',\n  middleware: [offset(10), flip(), shift()],\n});\n```\n\n## Updating\n\n`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.\n\nIf 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.\n\nTo do so, use the `autoUpdate` utility:\n\n```js\nimport { useFloating } from 'solid-floating-ui';\nimport { autoUpdate } from '@floating-ui/dom';\n \nfunction App() {\n  const [reference, setReference] = createSignal();\n  const [floating, setFloating] = createSignal();\n\n  useFloating(reference, floating, {\n    whileElementsMounted: autoUpdate,\n \n    // Or, pass options. Ensure the cleanup function is returned.\n    whileElementsMounted: (reference, floating, update) =\u003e (\n      autoUpdate(reference, floating, update, {\n        animationFrame: true,\n      })\n    )\n  });\n}\n```\n\nAlternatively (or additionally), you may want to update manually in some cases. The primitive returns an `update()` function to update the position at will:\n\n```js\n\nconst position = useFloating();\n\nposition.update();\n```\n\n### Virtual Elements\n\nSee [Virtual Elements](https://floating-ui.com/docs/virtual-elements) for details.\n\n```js\nfunction App() {\n  const [floating, setFloating] = createSignal();\n\n  const position = useFloating(\n    () =\u003e ({\n      getBoundingClientRect() {\n        return {\n          // ...\n        };\n      },\n    }),\n    floating,\n  );\n\n  return (\n    \u003cdiv\n      ref={floating}\n      style={{\n        position: position.strategy,\n        top: `${position.y ?? 0}px`,\n        left: `${position.x ?? 0}px`,\n      }}\n    \u003e\n      Tooltip\n    \u003c/div\u003e\n  );\n}\n```\n\n## Sponsors\n\n![Sponsors](https://github.com/lxsmnsyc/sponsors/blob/main/sponsors.svg?raw=true)\n\n## License\n\nMIT © [lxsmnsyc](https://github.com/lxsmnsyc)\n","funding_links":["https://github.com/sponsors/lxsmnsyc"],"categories":["📦 Components \u0026 Libraries"],"sub_categories":["UI Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flxsmnsyc%2Fsolid-floating-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flxsmnsyc%2Fsolid-floating-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flxsmnsyc%2Fsolid-floating-ui/lists"}