{"id":25707696,"url":"https://github.com/jhsware/inferno-popper","last_synced_at":"2025-04-30T14:43:51.464Z","repository":{"id":57273613,"uuid":"101284693","full_name":"jhsware/inferno-popper","owner":"jhsware","description":"Inferno.js wrapper around Popper.js, ported from react-popper","archived":false,"fork":false,"pushed_at":"2020-02-01T14:46:48.000Z","size":1400,"stargazers_count":5,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-19T05:52:03.048Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/jhsware.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-24T10:47:44.000Z","updated_at":"2022-06-03T12:11:36.000Z","dependencies_parsed_at":"2022-09-17T05:11:13.253Z","dependency_job_id":null,"html_url":"https://github.com/jhsware/inferno-popper","commit_stats":null,"previous_names":[],"tags_count":70,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhsware%2Finferno-popper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhsware%2Finferno-popper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhsware%2Finferno-popper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhsware%2Finferno-popper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jhsware","download_url":"https://codeload.github.com/jhsware/inferno-popper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251723195,"owners_count":21633104,"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":[],"created_at":"2025-02-25T08:38:27.718Z","updated_at":"2025-04-30T14:43:51.204Z","avatar_url":"https://github.com/jhsware.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# inferno-popper\n[![gzip size](http://img.badgesize.io/https://unpkg.com/inferno-popper/dist/cjs/index.min.js?compression=gzip)](https://unpkg.com/inferno-popper/dist/cjs/index.min.js)\n\nInferno wrapper for [PopperJS](https://github.com/FezVrasta/popper.js/) ported from [inferno-popper](https://github.com/souporserious/inferno-popper).\n\n## Compatibility\ninferno-popper 7.x supports Inferno v7\n\ninferno-popper 6.x supports Inferno v6\n\ninferno-popper 5.x supports Inferno v5\n\ninferno-popper 4.x supports Inferno v4\n\ninferno-popper 3.x supports Inferno v3 (code in InfernoV3 branch)\n\n## Install\n\n`$ npm install --save inferno-popper`\n\n## Usage\n\nNOTE: There is an example of a dynamic popper if you check the browser test.\n\n```js\nimport { Manager, Target, Popper, Arrow } from 'inferno-popper'\n\nconst PopperExample = () =\u003e (\n  \u003cManager\u003e\n    \u003cTarget style={{ width: 120, height: 120, background: '#b4da55' }}\u003e\n      Target Box\n    \u003c/Target\u003e\n    \u003cPopper placement=\"left\" className=\"popper\"\u003e\n      Left Content\n      \u003cArrow className=\"popper__arrow\"/\u003e\n    \u003c/Popper\u003e\n    \u003cPopper placement=\"right\" className=\"popper\"\u003e\n      Right Content\n      \u003cArrow className=\"popper__arrow\"/\u003e\n    \u003c/Popper\u003e\n  \u003c/Manager\u003e\n)\n```\n\n## Usage w/ child function\n\nThis is a useful way to interact with custom components. Just make sure you pass down the refs properly.\n\n```js\nimport { Manager, Target, Popper, Arrow } from 'inferno-popper'\n\nconst PopperExample = () =\u003e (\n  \u003cManager\u003e\n    \u003cTarget\u003e\n      {({ targetProps }) =\u003e (\n        \u003cdiv {...targetProps}\u003e\n          Target Box\n        \u003c/div\u003e\n      )}\n    \u003c/Target\u003e\n    \u003cPopper placement=\"left\"\u003e\n      {({ popperProps, restProps }) =\u003e (\n        \u003cdiv\n          className=\"popper\"\n          {...popperProps}\n        \u003e\n          Popper Content\n          \u003cArrow\u003e\n            {({ arrowProps, restProps }) =\u003e (\n              \u003cspan\n                className=\"popper__arrow\"\n                {...arrowProps}\n              /\u003e\n            )}\n          \u003c/Arrow\u003e\n        \u003c/div\u003e\n      )}\n    \u003c/Popper\u003e\n  \u003c/Manager\u003e\n)\n```\n\n## `Shared Props`\n\n`Target`, `Popper`, and `Arrow` all share the following props\n\n#### `component`: PropTypes.oneOfType([PropTypes.node, PropTypes.func])\n\nA valid DOM tag or custom component to render. If using a custom component, an `innerRef` prop will be passed down that **must** be attached to the child component ref.\n\n#### `innerRef`: PropTypes.func\n\nUse this prop to access the internal ref. Does not apply to the `Manager` component since we do not interact with its ref.\n\n## `Manager`\n\nThis is a special component that provides the `Target` component to the `Popper` component. Pass any props as you normally would here.\n\n#### `tag`: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])\n\nA valid DOM tag to render. Allows rendering just children by passing `false`. Once React 16 is out, this prop will most likely go away since we will be able to return an array and all this currently does is subscribe `Target` and `Popper`.\n\n## `Target`\n\nThis is just a simple component that subscribes to `PopperManager`, so `Popper` can make use of it. Again, pass any props as you normally would here.\n\nEach `Target` must be wrapped in a `Manager`, and each `Manager` can wrap only one `Target`.\n\n#### `children`: PropTypes.oneOfType([PropTypes.node, PropTypes.func])\n\nA `Target`'s child may be one of the following:\n\n- a React element[s]\n- a function accepting the following object (all props must be passed down in order for the PopperJS to work properly)\n\n  ```js\n  {\n    targetProps: {\n      ref // a function that accepts the target component as an argument\n    },\n    restProps // any other props that came through the Target component\n  }\n  ```\n\n\n## `Popper`\n\nYour popper that gets attached to the `Target` component.\n\nEach `Popper` must be wrapped in a `Manager`, and each `Manager` can wrap multiple `Popper` components.\n\n#### `placement`: PropTypes.oneOf(Popper.placements)\n#### `eventsEnabled`: PropTypes.bool\n#### `modifiers`: PropTypes.object\n\nPasses respective options to a new [Popper instance](https://github.com/FezVrasta/popper.js/blob/master/docs/_includes/popper-documentation.md#new-popperreference-popper-options). As for `onCreate` and `onUpdate`, these callbacks were intentionally left out in favor of using the [component lifecycle methods](https://facebook.github.io/react/docs/react-component.html#the-component-lifecycle). If you have a good use case for these please feel free to file and issue and I will consider adding them in.\n\n#### `children`: PropTypes.oneOfType([PropTypes.node, PropTypes.func])\n\nA `Popper`'s child may be one of the following:\n\n- a React element[s]\n- a function accepting the following object (all props must be passed down in order for the PopperJS to work properly)\n\n  ```js\n  {\n    popperProps: {\n      ref, // a function that accepts the popper component as an argument\n      style, // the styles to apply to the popper element\n      ['data-placement'] // the placement of the Popper\n    },\n    restProps // any other props that came through the Popper component\n  }\n  ```\n\n## `Arrow`\n\nAnother component that subscribes to the `Popper` component as an [arrow modifier](https://github.com/FezVrasta/popper.js/blob/master/docs/_includes/popper-documentation.md#Modifiers.arrow). Must be a child of `Popper`.\n\n#### `children`: PropTypes.oneOfType([PropTypes.node, PropTypes.func])\n\nAn `Arrow`'s child may be one of the following:\n\n- a React element[s]\n- a function accepting the following object (all props must be passed down in order for the PopperJS to work properly)\n\n  ```js\n  {\n    arrowProps: {\n      ref, // a function that accepts the arrow component as an argument\n      style // the styles to apply to the arrow element\n    },\n    restProps // any other props that came through the Arrow component\n  }\n  ```\n\n\n## Running Brower Test Locally\n\nclone repo\n\n`git clone git@github.com:jhsware/inferno-popper.git`\n\nmove into folder\n\n`cd ~/inferno-popper`\n\ninstall dependencies\n\n`npm install`\n\nrun browser test\n\n`$ npm run build \u0026\u0026 npm run build-test \u0026\u0026 node test/browser/server.js`\n\nopen your browser and visit: `http://localhost:8080/`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhsware%2Finferno-popper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjhsware%2Finferno-popper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhsware%2Finferno-popper/lists"}