{"id":16837591,"url":"https://github.com/needim/react-useoverlay","last_synced_at":"2025-04-11T05:14:17.267Z","repository":{"id":40274628,"uuid":"506823654","full_name":"needim/react-useoverlay","owner":"needim","description":"if floating-ui and framer-motion had a baby","archived":false,"fork":false,"pushed_at":"2022-07-30T18:16:09.000Z","size":1985,"stargazers_count":12,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-11T05:13:52.780Z","etag":null,"topics":["floating","floating-ui","tooltip"],"latest_commit_sha":null,"homepage":"https://needim.github.io/react-useoverlay/","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/needim.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["needim"],"patreon":"needim","ko_fi":"needim"}},"created_at":"2022-06-23T23:53:15.000Z","updated_at":"2025-03-06T13:48:18.000Z","dependencies_parsed_at":"2022-09-21T12:11:07.135Z","dependency_job_id":null,"html_url":"https://github.com/needim/react-useoverlay","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/needim%2Freact-useoverlay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/needim%2Freact-useoverlay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/needim%2Freact-useoverlay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/needim%2Freact-useoverlay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/needim","download_url":"https://codeload.github.com/needim/react-useoverlay/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248345268,"owners_count":21088245,"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","floating-ui","tooltip"],"created_at":"2024-10-13T12:17:57.419Z","updated_at":"2025-04-11T05:14:17.240Z","avatar_url":"https://github.com/needim.png","language":"TypeScript","funding_links":["https://github.com/sponsors/needim","https://patreon.com/needim","https://ko-fi.com/needim"],"categories":[],"sub_categories":[],"readme":"# Create floating things easily\n\nuseOverlay uses floating-ui and framer-moting under the hood, giving you an API that provides great usability.\n\n\u003e **Warning** Documentation is not complete!\n\u003e useOverlay is a very fresh hook. API can be changed.\n\n\u003e **Note** You should know!\n\u003e For styling useOverlay doesn't do anything than passing className parameter to floating overlay for now. You can use Tailwind or some other solutions.\n\n```console\nnpm install react-useoverlay\n```\n\n## Why Floating UI?\n\n\u003e Floating UI is a tiny, low-level library for creating \"floating\" elements.\nThe library provides two key functionalities:\n\n### 1. Anchored positioning primitives\n\u003e CSS is currently missing a feature called “anchored positioning” — the ability to anchor an element (like a tooltip) to another one (like a button) while simultaneously keeping it in view as best as possible by avoiding clipping and overflow.\n\u003e Attempting to do fully dynamic anchored positioning with today’s plain CSS is not possible. Floating UI provides a JavaScript implementation of this feature.\n\n### 2. User interaction primitives\n\u003e When creating a popover, dropdown menu, select, or combobox component that follows WAI-ARIA authoring practices, the complexity increases dramatically. Focus traps, indexed navigation, and typeahead are difficult to get right.\nThis functionality is currently available for React DOM but will be made agnostic in the future.\n\n---\n\n## Why framer-motion?\n\n### 1. Production-ready motion library for React\n\u003e Utilize the power behind Framer, the best prototyping tool for teams. Proudly open source.\n\n### 2. Simple declarative syntax means you write less code\n\u003e Less code means your codebase is easier to read and maintain. Animations that work like magic. When animating between two separate components, Framer Motion will take care of everything in between.\n\n---\n\n## Why useOverlay?\n\n### 1. Because it simplifies the API you need to deal with it.\n\u003e That's it.\n\n## Use cases\n\n- If you don't wanna handle all the logic of floating elements\n- If you are building your own UI Library\n- If you wanna create a custom build floating overlays","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneedim%2Freact-useoverlay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fneedim%2Freact-useoverlay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneedim%2Freact-useoverlay/lists"}