{"id":18973551,"url":"https://github.com/anishmprasad/rpopover","last_synced_at":"2025-04-19T16:38:01.131Z","repository":{"id":63312333,"uuid":"196834923","full_name":"anishmprasad/rpopover","owner":"anishmprasad","description":"A lightweight popover component for react.","archived":false,"fork":false,"pushed_at":"2023-02-25T17:37:12.000Z","size":73,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-29T10:12:18.766Z","etag":null,"topics":["popover","react","react-popover","react-popup","reactjs"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anishmprasad.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":"2019-07-14T12:39:04.000Z","updated_at":"2022-04-03T17:31:26.000Z","dependencies_parsed_at":"2024-06-21T13:24:27.570Z","dependency_job_id":null,"html_url":"https://github.com/anishmprasad/rpopover","commit_stats":{"total_commits":29,"total_committers":2,"mean_commits":14.5,"dds":0.4482758620689655,"last_synced_commit":"6bc518f5048278f4d04455d932ff499a5b86df22"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anishmprasad%2Frpopover","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anishmprasad%2Frpopover/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anishmprasad%2Frpopover/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anishmprasad%2Frpopover/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anishmprasad","download_url":"https://codeload.github.com/anishmprasad/rpopover/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249223935,"owners_count":21232833,"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":["popover","react","react-popover","react-popup","reactjs"],"created_at":"2024-11-08T15:12:29.200Z","updated_at":"2025-04-19T16:38:01.107Z","avatar_url":"https://github.com/anishmprasad.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# rpopover\n\nA simple popover component for React.\n\n### Installation\n\n```\n\n// with npm\n$ npm install react-extensions --save\n\n// with yarn\n$ yarn add react-extensions\n\n// with npm\n$ npm install rpopover --save\n\n// with yarn\n$ yarn add rpopover\n```\n\n### Usage\n\nHere is a quick example to get you started, **it's all you need**:\n\n```jsx\nimport Popover from 'rpopover';\nimport 'rpopover/styles.min.css';\n\nfunction ProfileSvg() {\n\treturn (\n\t\t\u003csvg className='_1GTCc' viewBox='6 0 12 24' height='19' width='18' fill='#686b78'\u003e\n\t\t\t\u003cpath d='M11.9923172,11.2463768 C8.81761115,11.2463768 6.24400341,8.72878961 6.24400341,5.62318841 C6.24400341,2.5175872 8.81761115,0 11.9923172,0 C15.1670232,0 17.740631,2.5175872 17.740631,5.62318841 C17.740631,8.72878961 15.1670232,11.2463768 11.9923172,11.2463768 Z M11.9923172,9.27536232 C14.0542397,9.27536232 15.7257581,7.64022836 15.7257581,5.62318841 C15.7257581,3.60614845 14.0542397,1.97101449 11.9923172,1.97101449 C9.93039471,1.97101449 8.25887628,3.60614845 8.25887628,5.62318841 C8.25887628,7.64022836 9.93039471,9.27536232 11.9923172,9.27536232 Z M24,24 L0,24 L1.21786143,19.7101449 L2.38352552,15.6939891 C2.85911209,14.0398226 4.59284263,12.7536232 6.3530098,12.7536232 L17.6316246,12.7536232 C19.3874139,12.7536232 21.1256928,14.0404157 21.6011089,15.6939891 L22.9903494,20.5259906 C23.0204168,20.63057 23.0450458,20.7352884 23.0641579,20.8398867 L24,24 Z M21.1127477,21.3339312 L21.0851024,21.2122487 C21.0772161,21.1630075 21.0658093,21.1120821 21.0507301,21.0596341 L19.6614896,16.2276325 C19.4305871,15.4245164 18.4851476,14.7246377 17.6316246,14.7246377 L6.3530098,14.7246377 C5.4959645,14.7246377 4.55444948,15.4231177 4.32314478,16.2276325 L2.75521062,21.6811594 L2.65068631,22.0289855 L21.3185825,22.0289855 L21.1127477,21.3339312 Z' /\u003e\n\t\t\u003c/svg\u003e\n\t);\n}\n\nexport default function PopoverContainer(props) {\n\treturn (\n\t\t\u003cdiv className='popover-container' style={{ overflow: 'hidden', height: '400px' }}\u003e\n\t\t\t\u003ch1 style={{ textAlign: 'center', margin: '40px 0' }}\u003erpopover\u003c/h1\u003e\n\t\t\t\u003cPopover\n\t\t\t\tbuttonComponent={\n\t\t\t\t\t\u003cdiv className='_1fmVk _30y3a'\u003e\n\t\t\t\t\t\t\u003cdiv\u003e\n\t\t\t\t\t\t\t\u003cdiv className='_2CgXb'\u003e\n\t\t\t\t\t\t\t\t\u003ca className='_1T-E4'\u003e\n\t\t\t\t\t\t\t\t\t\u003cspan className='_3yZyp'\u003e\n\t\t\t\t\t\t\t\t\t\t\u003cProfileSvg /\u003e\n\t\t\t\t\t\t\t\t\t\u003c/span\u003e\n\t\t\t\t\t\t\t\t\t\u003cspan className='_1qbcC'\u003erpopover\u003c/span\u003e\n\t\t\t\t\t\t\t\t\u003c/a\u003e\n\t\t\t\t\t\t\t\u003c/div\u003e\n\t\t\t\t\t\t\u003c/div\u003e\n\t\t\t\t\t\u003c/div\u003e\n\t\t\t\t}\n\t\t\t\tdropdownComponent={\u003cdiv\u003edropdown components\u003c/div\u003e}\n\t\t\t\tdropdownAlignment='right'\n\t\t\t\tonHover={false}\n\t\t\t\tcloseOnScroll={false}\n\t\t\t\tshow={true}\n\t\t\t/\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\n### Props\n\n| Name                   | Type       | Required | Description                          |\n| ---------------------- | ---------- | -------- | ------------------------------------ |\n| containerClass         | `string`   | `true`   | custom class for container           |\n| buttonComponent        | `string`   | `true`   | the component for button             |\n| buttonComponentClass   | `string`   | `true`   | custom class for button              |\n| dropdownComponent      | `object`   | `true`   | the component for dropdown           |\n| dropdownComponentClass | `object`   | `true`   | custom class for dropdown            |\n| dropdownAlignment      | `object`   | `true`   | the component for dropdown alignment |\n| onHover                | `boolean`  | `true`   | option for onHover                   |\n| closeOnScroll          | `boolean`  | `true`   | option for closeOnScroll             |\n| show                   | `boolean`  | `true`   | option for show                      |\n| caret                  | `boolean`  | `true`   | enable caret in popover              |\n\n### TODO\n\n-   [x] Minification\n-   [x] Documentation\n-   [x] CSS Polishing and Transitions\n-   [x] Production Level\n\n\n### License\n\nApache 2.0\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanishmprasad%2Frpopover","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanishmprasad%2Frpopover","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanishmprasad%2Frpopover/lists"}