{"id":13461971,"url":"https://github.com/malcodeman/react-popover","last_synced_at":"2025-09-25T22:08:31.689Z","repository":{"id":42896733,"uuid":"250070662","full_name":"malcodeman/react-popover","owner":"malcodeman","description":"The Popover component displays floating content in relation to a target.","archived":false,"fork":false,"pushed_at":"2023-03-04T10:26:56.000Z","size":740,"stargazers_count":3,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-11-16T02:19:05.266Z","etag":null,"topics":["headless","popover","react","react-hooks"],"latest_commit_sha":null,"homepage":"http://react-popover-storybook.surge.sh","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/malcodeman.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}},"created_at":"2020-03-25T19:21:35.000Z","updated_at":"2023-06-29T04:58:13.000Z","dependencies_parsed_at":"2024-05-02T15:59:59.224Z","dependency_job_id":"2b38c6d4-c91c-44e5-98ab-3a19fa38806d","html_url":"https://github.com/malcodeman/react-popover","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/malcodeman%2Freact-popover","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/malcodeman%2Freact-popover/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/malcodeman%2Freact-popover/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/malcodeman%2Freact-popover/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/malcodeman","download_url":"https://codeload.github.com/malcodeman/react-popover/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227690644,"owners_count":17804938,"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":["headless","popover","react","react-hooks"],"created_at":"2024-07-31T12:00:36.697Z","updated_at":"2025-09-25T22:08:26.641Z","avatar_url":"https://github.com/malcodeman.png","language":"TypeScript","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"# [react-popover](http://react-popover-storybook.surge.sh)\n\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/malcodeman/react-popover/blob/master/LICENSE)\n[![npm](https://img.shields.io/npm/v/@malcodeman/react-popover)](https://www.npmjs.com/package/@malcodeman/react-popover)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\nThe Popover component displays floating content in relation to a target. Popovers appear either at the top, bottom, left or right of their target. The preferred and default side is the bottom. Popovers use smart positioning if there is not enough space.\n\n## Getting started\n\n```sh\nyarn add @malcodeman/react-popover\n# or\nnpm install --save @malcodeman/react-popover\n```\n\n```jsx\nimport React from \"react\";\nimport { StatefulPopover } from \"@malcodeman/react-popover\";\n\nfunction App() {\n  return (\n    \u003cStatefulPopover content={() =\u003e \u003cdiv\u003ePopoverContent\u003c/div\u003e}\u003e\n      \u003cbutton\u003eTrigger Popover\u003c/button\u003e\n    \u003c/StatefulPopover\u003e\n  );\n}\n\nexport default App;\n```\n\n## Stateless example\n\n```jsx\nimport React from \"react\";\nimport { Popover } from \"@malcodeman/react-popover\";\n\nfunction App() {\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  return (\n    \u003cPopover isOpen={isOpen} content={() =\u003e \u003cdiv\u003ePopoverContent\u003c/div\u003e}\u003e\n      \u003cbutton onClick={() =\u003e setIsOpen(!isOpen)}\u003eTrigger Popover\u003c/button\u003e\n    \u003c/Popover\u003e\n  );\n}\n\nexport default App;\n```\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmalcodeman%2Freact-popover","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmalcodeman%2Freact-popover","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmalcodeman%2Freact-popover/lists"}