{"id":23338896,"url":"https://github.com/robertmenke/react-popover","last_synced_at":"2025-04-09T22:32:29.152Z","repository":{"id":80740600,"uuid":"92623293","full_name":"RobertMenke/react-popover","owner":"RobertMenke","description":"Customizable positioning for tooltips, menus, and any other DOM elements inside of a container","archived":false,"fork":false,"pushed_at":"2018-02-11T16:23:17.000Z","size":3788,"stargazers_count":13,"open_issues_count":0,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-07T15:52:58.203Z","etag":null,"topics":["placement","popover","positioning","react","tooltip","web"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RobertMenke.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2017-05-27T20:47:51.000Z","updated_at":"2019-09-18T23:26:50.000Z","dependencies_parsed_at":"2023-03-17T16:15:18.768Z","dependency_job_id":null,"html_url":"https://github.com/RobertMenke/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/RobertMenke%2Freact-popover","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RobertMenke%2Freact-popover/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RobertMenke%2Freact-popover/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RobertMenke%2Freact-popover/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RobertMenke","download_url":"https://codeload.github.com/RobertMenke/react-popover/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248123859,"owners_count":21051541,"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":["placement","popover","positioning","react","tooltip","web"],"created_at":"2024-12-21T03:17:06.806Z","updated_at":"2025-04-09T22:32:29.142Z","avatar_url":"https://github.com/RobertMenke.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Alt text](/example/react-popover.gif?raw=true \"Demo\")\n\n# Why this positioning library?\n\nMany positioning libraries in an effort to be simple assume static positioning and have no sense of the container they get\nappended to (often the document's body). \n\nI wanted to build a positioning component that could handle relative and absolute positioned\ncontainers, could scroll with its container, could be used as a general-purpose positioning mechanism, and was dead-simple\nto use.\n\nIf you like the way the library has been written, or find it useful in your own project don't forget to star it!\n\n# Installation\n\nyarn\n```\nyarn add rm-react-popover\n```\n\nnpm\n```\nnpm install rm-react-popover --save\n```\n\n\n# Usage\n\n```javascript\nimport React, { Component } from \"react\"\nimport Popover from \"rm-react-popover\"\n\n//Then, inside of your components render method\nclass Example extends Component {\n    render() {\n        return (\n                \u003cPopover\n                    //Some HTML element to place the markup in\n                    parent={this.container} \n                    //some HTML element to stick the menu to\n                    element={this.element} \n                     //Can be a string, or an array of string like [\"left\", \"top\"]. Possible values are auto, left, right, top, bottom, element_left, element_right\n                     //element_left and element_right align the left or right edge of your menu to the left or right edge of an element\n                    placement=\"auto\"\n                    //When open is true, the markup is visible, when false it's invisible (but still in the DOM)\n                    open={false}\n                    //The top_cushion will add additional vertical space between your element\n                    //and the element it sticks to. This is useful for things like pseudo\n                    //elements used as triangle pointers.\n                    top_cushion={10}\n                    //left_cushion is just like top_cushion. It adds additional horizontal space between\n                    //your popover/tooltip and the element you're sticking it to\n                    left_cushion={-50}\n                    //classes allows you to pass in a string or array of strings that will be applied\n                    //as class names to the markup. rm-react-popover applies classes internally to\n                    //keep track of which positions were applied, but the classes prop will always\n                    //come before the internal classes\n                    classes={[\"custom\", \"css-classes\"]}\n                \u003e\n                    \u003cspan\u003eI was called with placement=\"auto\"\u003c/span\u003e\n                \u003c/Popover\u003e\n        )\n    }    \n}\n```\n\nrm-react-tooltip does not come with any css applied out of the box. This is intentional as this is intended to be a general-purpose positioning library that can accept arbitrary markup as children of the component.\n\nI have an example of what the styling of a tooltip might look like in the src folder, and it's also the stylesheet used in the example folder.\n\nEvery placement option has a corollary css class that gets applied, so that you can intelligently style your component based on its position. That mapping looks like this.\n\n \n ```\n top            = TooltipAbove\n bottom         = TooltipBelow\n right          = TooltipRight\n left           = TooltipLeft\n element_right  = TooltipAlignRight\n element_left   = TooltipAlignLeft\n auto           = autoplace\n```\n\n# Props\n\nIt may be helpful to look at the flow type definition for the component's props\n\n```javascript\ntype Props = {\n    element         : HTMLElement,\n    parent          : HTMLElement,\n    placement       : string | Array\u003cstring\u003e,\n    open            : boolean,\n    classes         : ?string | ?Array\u003cstring\u003e,\n    left_cushion    : ?number,\n    top_cushion     : ?number,\n    children        : Array\u003cElement\u003e\n}\n```\n# Dependencies\n\nFor obvious reasons:\n- React\n- React DOM\n\n# Webpack build instructions\n\nI use one webpack configuration to build the library and a second configuration to build out the example.\n\nBuilding the library: `npm start`\n\nBuilding the example: `npm run build-example`\n\nBoth `example.webpack.config.js` and `webpack.config.js` define a variable called `is_production` at the top of the file. This variable controls which plugins get loaded. It may be helpful while developing to set this variable to false in order to use source maps in the browser.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobertmenke%2Freact-popover","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobertmenke%2Freact-popover","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobertmenke%2Freact-popover/lists"}