{"_id":"@react-bootstrap/react-popper","_rev":"3217428","name":"@react-bootstrap/react-popper","description":"React wrapper around Popper.js","dist-tags":{"latest":"1.2.1"},"maintainers":[{"name":"kytsang","email":""},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"taion","email":""}],"time":{"modified":"2024-03-21T07:19:41.000Z","created":"2018-07-09T14:05:10.969Z","1.2.1":"2018-08-20T15:58:57.700Z","1.2.0":"2018-07-27T19:55:26.845Z","1.1.0":"2018-07-26T20:52:48.544Z","1.0.2":"2018-07-09T14:05:10.969Z"},"users":{},"author":{"name":"Travis Arnold","email":"travis@souporserious.com","url":"http://souporserious.com"},"repository":{"type":"git","url":"git+https://github.com/souporserious/react-popper.git"},"versions":{"1.2.1":{"name":"@react-bootstrap/react-popper","version":"1.2.1","description":"React wrapper around Popper.js","license":"MIT","author":{"name":"Travis Arnold","email":"travis@souporserious.com","url":"http://souporserious.com"},"homepage":"https://github.com/souporserious/react-popper","main":"lib/cjs/index.js","module":"lib/esm/index.js","typings":"typings/react-popper.d.ts","files":["/dist","/lib","/typings/react-popper.d.ts"],"scripts":{"build":"npm run build:clean && npm run build:esm && npm run build:cjs && npm run build:umd && npm run build:flow","build:clean":"rimraf dist/ && rimraf lib/","build:umd":"rollup -c && rimraf dist/index.esm.js","build:esm":"cross-env BABEL_ENV=esm babel src --out-dir lib/esm","build:cjs":"cross-env BABEL_ENV=cjs babel src --out-dir lib/cjs","build:flow":"flow-copy-source --ignore '{__mocks__/*,*.test}.js' src lib/cjs","demo:dev":"parcel --out-dir demo/dist demo/index.html","demo:build":"parcel build --out-dir demo/dist demo/index.html --public-url=/react-popper","demo:deploy":"yarn demo:build && gh-pages -d demo/dist","test":"npm run test:eslint && npm run test:flow && npm run test:ts && npm run test:jest","test:ts":"tsc --project ./typings/tests","test:flow":"flow check","test:jest":"jest","test:eslint":"eslint src","prepare":"npm run build","precommit":"pretty-quick --staged && test"},"jest":{"setupTestFrameworkScriptFile":"<rootDir>jest.setup.js","snapshotSerializers":["enzyme-to-json/serializer"]},"repository":{"type":"git","url":"git+https://github.com/souporserious/react-popper.git"},"bugs":{"url":"https://github.com/souporserious/react-popper/issues"},"keywords":["react","react-popper","popperjs","component","drop","tooltip","popover"],"peerDependencies":{"react":"0.14.x || ^15.0.0 || ^16.0.0"},"dependencies":{"babel-runtime":"6.x.x","create-react-context":"^0.2.1","popper.js":"^1.14.4","prop-types":"^15.6.1","typed-styles":"^0.0.5","warning":"^3.0.0"},"devDependencies":{"@types/react":"^16.1.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-jest":"^22.4.3","babel-plugin-external-helpers":"^6.22.0","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-es2015-modules-commonjs":"^6.26.2","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","cross-env":"^5.1.4","emotion":"^9.1.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.3","eslint":"^4.19.1","eslint-config-prettier":"^2.9.0","eslint-plugin-flowtype":"^2.46.1","eslint-plugin-jest":"^21.15.0","eslint-plugin-promise":"^3.7.0","eslint-plugin-react":"^7.7.0","flow-bin":"^0.69.0","flow-copy-source":"^1.3.0","gh-pages":"^1.1.0","git-branch-is":"^0.1.0","jest":"^22.4.3","parcel-bundler":"^1.6.2","prettier":"^1.11.1","pretty-quick":"^1.4.1","react":"16.2.0","react-dom":"^16.3.0","react-emotion":"^9.1.1","react-spring":"^4.0.1","recompose":"^0.26.0","rimraf":"^2.6.2","rollup":"^0.59.3","rollup-plugin-babel":"^3.0.4","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-replace":"^2.0.0","rollup-plugin-size-snapshot":"^0.5.1","rollup-plugin-uglify":"^4.0.0","typescript":"^2.8.1"},"gitHead":"c724602ecf8f48dc14a0f206d6232c02bba2843f","_id":"@react-bootstrap/react-popper@1.2.1","_npmVersion":"6.1.0","_nodeVersion":"10.1.0","_npmUser":{"name":"monastic.panic","email":"monastic.panic@gmail.com"},"dist":{"shasum":"4edf4851d5b4dcf2eb6b264ebbed1a7b7654177b","size":27801,"noattachment":false,"key":"/@react-bootstrap/react-popper/-/@react-bootstrap/react-popper-1.2.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/@react-bootstrap/react-popper/download/@react-bootstrap/react-popper-1.2.1.tgz"},"maintainers":[{"name":"kytsang","email":""},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"taion","email":""}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-popper_1.2.1_1534780737537_0.73994331692174"},"_hasShrinkwrap":false,"publish_time":1534780737700,"_cnpm_publish_time":1534780737700,"_cnpmcore_publish_time":"2021-12-16T14:44:39.048Z"},"1.2.0":{"name":"@react-bootstrap/react-popper","version":"1.2.0","description":"React wrapper around Popper.js","license":"MIT","author":{"name":"Travis Arnold","email":"travis@souporserious.com","url":"http://souporserious.com"},"homepage":"https://github.com/souporserious/react-popper","main":"lib/cjs/index.js","module":"lib/esm/index.js","typings":"typings/react-popper.d.ts","files":["/dist","/lib","/typings/react-popper.d.ts"],"scripts":{"build":"npm run build:clean && npm run build:esm && npm run build:cjs && npm run build:umd && npm run build:flow","build:clean":"rimraf dist/ && rimraf lib/","build:umd":"rollup -c && rimraf dist/index.esm.js","build:esm":"cross-env BABEL_ENV=esm babel src --out-dir lib/esm","build:cjs":"cross-env BABEL_ENV=cjs babel src --out-dir lib/cjs","build:flow":"flow-copy-source --ignore '{__mocks__/*,*.test}.js' src lib/cjs","demo:dev":"parcel --out-dir demo/dist demo/index.html","demo:build":"parcel build --out-dir demo/dist demo/index.html --public-url=/react-popper","demo:deploy":"yarn demo:build && gh-pages -d demo/dist","test":"npm run test:eslint && npm run test:flow && npm run test:ts && npm run test:jest","test:ts":"tsc --project ./typings/tests","test:flow":"flow check","test:jest":"jest","test:eslint":"eslint src","prepare":"npm run build","precommit":"pretty-quick --staged && test","prepublishOnly":"git-branch-is release-fork"},"jest":{"setupTestFrameworkScriptFile":"<rootDir>jest.setup.js","snapshotSerializers":["enzyme-to-json/serializer"]},"repository":{"type":"git","url":"git+https://github.com/souporserious/react-popper.git"},"bugs":{"url":"https://github.com/souporserious/react-popper/issues"},"keywords":["react","react-popper","popperjs","component","drop","tooltip","popover"],"peerDependencies":{"react":"0.14.x || ^15.0.0 || ^16.0.0"},"dependencies":{"babel-plugin-transform-class-properties":"^6.24.1","babel-runtime":"6.x.x","create-react-context":"^0.2.1","popper.js":"^1.14.1","prop-types":"^15.6.1","react-lifecycles-compat":"^3.0.4","typed-styles":"^0.0.5","warning":"^3.0.0"},"devDependencies":{"@types/react":"^16.1.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-jest":"^22.4.3","babel-plugin-external-helpers":"^6.22.0","babel-plugin-transform-es2015-modules-commonjs":"^6.26.2","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","cross-env":"^5.1.4","emotion":"^9.1.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.3","eslint":"^4.19.1","eslint-config-prettier":"^2.9.0","eslint-plugin-flowtype":"^2.46.1","eslint-plugin-jest":"^21.15.0","eslint-plugin-promise":"^3.7.0","eslint-plugin-react":"^7.7.0","flow-bin":"^0.69.0","flow-copy-source":"^1.3.0","gh-pages":"^1.1.0","git-branch-is":"^0.1.0","jest":"^22.4.3","parcel-bundler":"^1.6.2","prettier":"^1.11.1","pretty-quick":"^1.4.1","react":"16.2.0","react-dom":"^16.3.0","react-emotion":"^9.1.1","react-spring":"^4.0.1","recompose":"^0.26.0","rimraf":"^2.6.2","rollup":"^0.59.3","rollup-plugin-babel":"^3.0.4","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-replace":"^2.0.0","rollup-plugin-size-snapshot":"^0.5.1","rollup-plugin-uglify":"^4.0.0","typescript":"^2.8.1"},"gitHead":"08c0e75c75bae0c3cc488d86ce2cb5299485fbde","_id":"@react-bootstrap/react-popper@1.2.0","_npmVersion":"6.1.0","_nodeVersion":"10.1.0","_npmUser":{"name":"monastic.panic","email":"monastic.panic@gmail.com"},"dist":{"shasum":"7c3c51e9e60ceae281322402984c56675c3eb692","size":30284,"noattachment":false,"key":"/@react-bootstrap/react-popper/-/@react-bootstrap/react-popper-1.2.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@react-bootstrap/react-popper/download/@react-bootstrap/react-popper-1.2.0.tgz"},"maintainers":[{"name":"kytsang","email":""},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"taion","email":""}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-popper_1.2.0_1532721326721_0.80335238963537"},"_hasShrinkwrap":false,"publish_time":1532721326845,"_cnpm_publish_time":1532721326845,"_cnpmcore_publish_time":"2021-12-16T14:44:39.284Z"},"1.1.0":{"name":"@react-bootstrap/react-popper","version":"1.1.0","description":"React wrapper around Popper.js","license":"MIT","author":{"name":"Travis Arnold","email":"travis@souporserious.com","url":"http://souporserious.com"},"homepage":"https://github.com/souporserious/react-popper","main":"lib/cjs/index.js","module":"lib/esm/index.js","typings":"typings/react-popper.d.ts","files":["/dist","/lib","/typings/react-popper.d.ts"],"scripts":{"build":"npm run build:clean && npm run build:esm && npm run build:cjs && npm run build:umd && npm run build:flow","build:clean":"rimraf dist/ && rimraf lib/","build:umd":"rollup -c && rimraf dist/index.esm.js","build:esm":"cross-env BABEL_ENV=esm babel src --out-dir lib/esm","build:cjs":"cross-env BABEL_ENV=cjs babel src --out-dir lib/cjs","build:flow":"flow-copy-source --ignore '{__mocks__/*,*.test}.js' src lib/cjs","demo:dev":"parcel --out-dir demo/dist demo/index.html","demo:build":"parcel build --out-dir demo/dist demo/index.html --public-url=/react-popper","demo:deploy":"yarn demo:build && gh-pages -d demo/dist","test":"npm run test:eslint && npm run test:flow && npm run test:ts && npm run test:jest","test:ts":"tsc --project ./typings/tests","test:flow":"flow check","test:jest":"jest","test:eslint":"eslint src","prepare":"npm run build","precommit":"pretty-quick --staged && test","prepublishOnly":"git-branch-is release-fork"},"jest":{"setupTestFrameworkScriptFile":"<rootDir>jest.setup.js","snapshotSerializers":["enzyme-to-json/serializer"]},"repository":{"type":"git","url":"git+https://github.com/souporserious/react-popper.git"},"bugs":{"url":"https://github.com/souporserious/react-popper/issues"},"keywords":["react","react-popper","popperjs","component","drop","tooltip","popover"],"peerDependencies":{"react":"0.14.x || ^15.0.0 || ^16.0.0"},"dependencies":{"babel-plugin-transform-class-properties":"^6.24.1","babel-runtime":"6.x.x","create-react-context":"^0.2.1","popper.js":"^1.14.1","prop-types":"^15.6.1","react-lifecycles-compat":"^3.0.4","typed-styles":"^0.0.5","warning":"^3.0.0"},"devDependencies":{"@types/react":"^16.1.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-jest":"^22.4.3","babel-plugin-external-helpers":"^6.22.0","babel-plugin-transform-es2015-modules-commonjs":"^6.26.2","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","cross-env":"^5.1.4","emotion":"^9.1.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.3","eslint":"^4.19.1","eslint-config-prettier":"^2.9.0","eslint-plugin-flowtype":"^2.46.1","eslint-plugin-jest":"^21.15.0","eslint-plugin-promise":"^3.7.0","eslint-plugin-react":"^7.7.0","flow-bin":"^0.69.0","flow-copy-source":"^1.3.0","gh-pages":"^1.1.0","git-branch-is":"^0.1.0","jest":"^22.4.3","parcel-bundler":"^1.6.2","prettier":"^1.11.1","pretty-quick":"^1.4.1","react":"16.2.0","react-dom":"^16.3.0","react-emotion":"^9.1.1","react-spring":"^4.0.1","recompose":"^0.26.0","rimraf":"^2.6.2","rollup":"^0.59.3","rollup-plugin-babel":"^3.0.4","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-replace":"^2.0.0","rollup-plugin-size-snapshot":"^0.5.1","rollup-plugin-uglify":"^4.0.0","typescript":"^2.8.1"},"gitHead":"7ff7f55a4477cb30861b187c6c445d417f421ab4","_id":"@react-bootstrap/react-popper@1.1.0","_npmVersion":"6.1.0","_nodeVersion":"10.1.0","_npmUser":{"name":"monastic.panic","email":"monastic.panic@gmail.com"},"dist":{"shasum":"5f79ba3931c01d64b96cd463edf7fd7ca3471dc3","size":30172,"noattachment":false,"key":"/@react-bootstrap/react-popper/-/@react-bootstrap/react-popper-1.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@react-bootstrap/react-popper/download/@react-bootstrap/react-popper-1.1.0.tgz"},"maintainers":[{"name":"kytsang","email":""},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"taion","email":""}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-popper_1.1.0_1532638368447_0.5423094088603588"},"_hasShrinkwrap":false,"publish_time":1532638368544,"_cnpm_publish_time":1532638368544,"_cnpmcore_publish_time":"2021-12-16T14:44:39.553Z"},"1.0.2":{"name":"@react-bootstrap/react-popper","version":"1.0.2","description":"React wrapper around Popper.js","license":"MIT","author":{"name":"Travis Arnold","email":"travis@souporserious.com","url":"http://souporserious.com"},"homepage":"https://github.com/souporserious/react-popper","main":"lib/cjs/index.js","module":"lib/esm/index.js","typings":"typings/react-popper.d.ts","files":["/dist","/lib","/typings/react-popper.d.ts"],"scripts":{"build":"npm run build:clean && npm run build:esm && npm run build:cjs && npm run build:umd && npm run build:flow","build:clean":"rimraf dist/ && rimraf lib/","build:umd":"rollup -c && rimraf dist/index.esm.js","build:esm":"cross-env BABEL_ENV=esm babel src --out-dir lib/esm","build:cjs":"cross-env BABEL_ENV=cjs babel src --out-dir lib/cjs","build:flow":"flow-copy-source --ignore '{__mocks__/*,*.test}.js' src lib/cjs","demo:dev":"parcel --out-dir demo/dist demo/index.html","demo:build":"parcel build --out-dir demo/dist demo/index.html --public-url=/react-popper","demo:deploy":"yarn demo:build && gh-pages -d demo/dist","test":"npm run test:eslint && npm run test:flow && npm run test:ts && npm run test:jest","test:ts":"tsc --project ./typings/tests","test:flow":"flow check","test:jest":"jest","test:eslint":"eslint src","prepare":"npm run build","precommit":"pretty-quick --staged && test","prepublishOnly":"git-branch-is release-fork"},"jest":{"setupTestFrameworkScriptFile":"<rootDir>jest.setup.js","snapshotSerializers":["enzyme-to-json/serializer"]},"repository":{"type":"git","url":"git+https://github.com/souporserious/react-popper.git"},"bugs":{"url":"https://github.com/souporserious/react-popper/issues"},"keywords":["react","react-popper","popperjs","component","drop","tooltip","popover"],"peerDependencies":{"react":"0.14.x || ^15.0.0 || ^16.0.0"},"dependencies":{"babel-plugin-transform-class-properties":"^6.24.1","babel-runtime":"6.x.x","create-react-context":"^0.2.1","popper.js":"^1.14.1","prop-types":"^15.6.1","typed-styles":"^0.0.5","warning":"^3.0.0"},"devDependencies":{"@types/react":"^16.1.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-jest":"^22.4.3","babel-plugin-external-helpers":"^6.22.0","babel-plugin-transform-es2015-modules-commonjs":"^6.26.2","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","cross-env":"^5.1.4","emotion":"^9.1.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.3","eslint":"^4.19.1","eslint-config-prettier":"^2.9.0","eslint-plugin-flowtype":"^2.46.1","eslint-plugin-jest":"^21.15.0","eslint-plugin-promise":"^3.7.0","eslint-plugin-react":"^7.7.0","flow-bin":"^0.69.0","flow-copy-source":"^1.3.0","gh-pages":"^1.1.0","git-branch-is":"^0.1.0","jest":"^22.4.3","parcel-bundler":"^1.6.2","prettier":"^1.11.1","pretty-quick":"^1.4.1","react":"16.2.0","react-dom":"^16.3.0","react-emotion":"^9.1.1","react-spring":"^4.0.1","recompose":"^0.26.0","rimraf":"^2.6.2","rollup":"^0.59.3","rollup-plugin-babel":"^3.0.4","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-replace":"^2.0.0","rollup-plugin-size-snapshot":"^0.5.1","rollup-plugin-uglify":"^4.0.0","typescript":"^2.8.1"},"gitHead":"bf61c6b458991cc7969e8081476ed645fadf9fb8","_id":"@react-bootstrap/react-popper@1.0.2","_npmVersion":"6.1.0","_nodeVersion":"10.1.0","_npmUser":{"name":"monastic.panic","email":"monastic.panic@gmail.com"},"dist":{"shasum":"fc205deab25a690a0a3c245685fdd6698f444ac0","size":28303,"noattachment":false,"key":"/@react-bootstrap/react-popper/-/@react-bootstrap/react-popper-1.0.2.tgz","tarball":"http://registry.cnpm.dingdandao.com/@react-bootstrap/react-popper/download/@react-bootstrap/react-popper-1.0.2.tgz"},"maintainers":[{"name":"kytsang","email":""},{"name":"monastic.panic","email":"monastic.panic@gmail.com"},{"name":"taion","email":""}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-popper_1.0.2_1531145110885_0.6022194788143267"},"_hasShrinkwrap":false,"publish_time":1531145110969,"_cnpm_publish_time":1531145110969,"_cnpmcore_publish_time":"2021-12-16T14:44:39.810Z"}},"readme":"## React Popper\n\n[![Build Status](https://travis-ci.org/FezVrasta/react-popper.svg?branch=master)](https://travis-ci.org/FezVrasta/react-popper)\n[![npm version](https://img.shields.io/npm/v/react-popper.svg)](https://www.npmjs.com/package/react-popper)\n[![npm downloads](https://img.shields.io/npm/dm/react-popper.svg)](https://www.npmjs.com/package/react-popper)\n[![Dependency Status](https://david-dm.org/souporserious/react-popper.svg)](https://david-dm.org/souporserious/react-popper)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![Get support or discuss](https://img.shields.io/badge/chat-on_spectrum-6833F9.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyBpZD0iTGl2ZWxsb18xIiBkYXRhLW5hbWU9IkxpdmVsbG8gMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTAgOCI%2BPGRlZnM%2BPHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fTwvc3R5bGU%2BPC9kZWZzPjx0aXRsZT5zcGVjdHJ1bTwvdGl0bGU%2BPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNSwwQy40MiwwLDAsLjYzLDAsMy4zNGMwLDEuODQuMTksMi43MiwxLjc0LDMuMWgwVjcuNThhLjQ0LjQ0LDAsMCwwLC42OC4zNUw0LjM1LDYuNjlINWM0LjU4LDAsNS0uNjMsNS0zLjM1UzkuNTgsMCw1LDBaTTIuODMsNC4xOGEuNjMuNjMsMCwxLDEsLjY1LS42M0EuNjQuNjQsMCwwLDEsMi44Myw0LjE4Wk01LDQuMThhLjYzLjYzLDAsMSwxLC42NS0uNjNBLjY0LjY0LDAsMCwxLDUsNC4xOFptMi4xNywwYS42My42MywwLDEsMSwuNjUtLjYzQS42NC42NCwwLDAsMSw3LjE3LDQuMThaIi8%2BPC9zdmc%2B)](https://spectrum.chat/popper-js/react-popper)\n\nReact wrapper around [Popper.js](https://popper.js.org).\n\n**important note:** popper.js is **not** a tooltip library, it's a *positioning engine* to be used to build features such as (but not restricted to) tooltips.\n\n## Install\n\nVia package managers:\n\n```bash\nnpm install react-popper --save\n# or\nyarn add react-popper\n```\n\nVia `script` tag (UMD library exposed as `ReactPopper`):\n\n```html\n<script src=\"https://unpkg.com/react-popper/dist/index.umd.js\"></script>\n```\n\n## Usage\n\n> Using `react-popper@0.x`? You can find its documentation [clicking here](https://github.com/souporserious/react-popper/tree/v0.x)\n\nExample:\n\n```jsx\nimport { Manager, Reference, Popper } from 'react-popper';\n\nconst Example = () => (\n  <Manager>\n    <Reference>\n      {({ ref }) => (\n        <button type=\"button\" ref={ref}>\n          Reference element\n        </button>\n      )}\n    </Reference>\n    <Popper placement=\"right\">\n      {({ ref, style, placement, arrowProps }) => (\n        <div ref={ref} style={style} data-placement={placement}>\n          Popper element\n          <div ref={arrowProps.ref} style={arrowProps.style} />\n        </div>\n      )}\n    </Popper>\n  </Manager>\n);\n```\n\n`react-popper` makes use of a React pattern called **\"render prop\"**, if you are not\nfamiliar with it, please read more [on the official React documentation](https://reactjs.org/docs/render-props.html).\n\n> Using React <=15 or Preact? The components created with them don't support to return\n[fragments](https://reactjs.org/docs/fragments.html), this means that you will need to\nwrap `<Reference />` and `<Popper />` into a single, common, `<div />` to make `react-popper` work.\n\n### API documentation\n\nThe `Manager` component is a simple wrapper that needs to surround all the other `react-popper` components in order\nto make them communicate with each others.\n\nThe `Popper` component accepts the properties `children`, `placement`, `modifiers`, `eventsEnabled` and `positionFixed`.\n\n```jsx\n<Popper\n  innerRef={(node) => this.popperNode = node}\n  placement=\"right\"\n  modifiers={{ preventOverflow: { enabled: false } }}\n  eventsEnabled={true}\n  positionFixed={false}\n>\n    { props => [...] }\n</Popper>\n```\n\n##### `children`\n\n```js\nchildren: ({|\n  ref: (?HTMLElement) => void,\n  style: { [string]: string | number },\n  placement: ?Placement,\n  outOfBoundaries: ?boolean,\n  scheduleUpdate: () => void,\n  arrowProps: {\n    ref: (?HTMLElement) => void,\n    style: { [string]: string | number },\n  },\n|}) => Node\n```\n\nA function (render prop) that takes as argument an object containing the properties\n`ref`, `style`, `placement`, and`arrowProps`.\n\nThe first 3 properties are the `ref` property that is going to be used to retrieve the [React refs](https://reactjs.org/docs/refs-and-the-dom.html) of the **popper** element, the `style` property,\nwhich contains the CSS styles (React CSS properties) computed by Popper.js and needed to style\nthe **popper** element so that it gets positioned in the desired way.  \nThese styles should be applied to your React component using the `style` prop or with any CSS-in-JS\nlibrary of your choice.\n\nThe `placement` property describes the placement of your popper after Popper.js has applied all the modifiers\nthat may have flipped or altered the originally provided `placement` property. You can use this to alter the\nstyle of the popper and or of the arrow according to the definitive placement. For instance, you can use this\nproperty to orient the arrow to the right direction.\n\n`scheduleUpdate` is a function you can call to schedule a Popper.js position update. It will directly call the [Popper#scheduleUpdate](https://popper.js.org/popper-documentation.html#Popper.scheduleUpdate) method.\n\nThe `arrowProps` argument is an object, containing a `style` and `ref` properties that are identical to the\nones provided as first and second argument of `children`, but are relative to the **arrow** element rather than\nthe popper. Use them to, accordingly, retrieve the ref of the **arrow** element and style it.\n\n##### `innerRef`\n```js\ninnerRef?: (?HTMLElement) => void\n```\n\nFunction that can be used to obtain popper reference\n\n##### `placement`\n\n```js\nplacement?: PopperJS$Placement;\n```\n\nOne of the accepted placement values listed in the [Popper.js documentation](https://popper.js.org/popper-documentation.html#Popper.placements).  \nYour popper is going to be placed according to the value of this property.  \nDefaults to `bottom`.\n\n```js\noutOfBoundaries: ?boolean;\n```\n\nA boolean that can be used to hide the popper element in case it's overflowing\nfrom its boundaries. [Read more](https://popper.js.org/popper-documentation.html#modifiers..hide).\n\n##### `eventsEnabled`\n\n```js\neventsEnabled?: boolean;\n```\n\nTells `react-popper` to enable or disable the [Popper.js event listeners](https://popper.js.org/popper-documentation.html#Popper.Defaults.eventsEnabled). `true` by default.\n\n##### `positionFixed`\n\nSet this property to `true` to tell Popper.js to use the `position: fixed` strategy\nto position the popper element. By default it's false, meaning that it will use the\n`position: absolute` strategy.\n\n##### `modifiers`\n\n```js\nmodifiers?: PopperJS$Modifiers;\n```\n\nAn object containing custom settings for the [Popper.js modifiers](https://popper.js.org/popper-documentation.html#modifiers).  \nYou can use this property to override their settings or to inject your custom ones.\n\n## Usage with `ReactDOM.createPortal`\n\nPopper.js is smart enough to work even if the **popper** and **reference** elements aren't\nin the same DOM context.  \nThis means that you can use [`ReactDOM.createPortal`](https://reactjs.org/docs/portals.html)\n(or any pre React 16 alternative) to move the popper component somewhere else in the DOM.\n\nThis can be useful if you want to position a tooltip inside an `overflow: hidden` container\nthat you want to make overflow. Please note that you can also try the `positionFixed` strategy\nto obtain a similar effect with less hassle.\n\n```jsx\nimport { Manager, Reference, Popper } from 'react-popper';\n\nconst Example = () => (\n  <Manager>\n    <Reference>\n      {({ ref }) => (\n        <button type=\"button\" ref={ref}>\n          Reference\n        </button>\n      )}\n    </Reference>\n    {ReactDOM.createPortal(\n      <Popper>\n        {({ placement, ref, style }) => (\n          <div ref={ref} style={style} data-placement={placement}>\n            Popper\n          </div>\n        )}\n      </Popper>,\n      document.querySelector('#destination')\n    )}\n  </Manager>\n);\n```\n\n## Usage without a reference `HTMLElement`\n\nWhenever you need to position a popper based on some arbitrary coordinates, you can provide `Popper` with a `referenceElement` property that is going to be used in place of the `referenceProps.getRef` React ref.\n\nThe `referenceElement` property must be an object with an interface compatible with an `HTMLElement` as described in the [Popper.js referenceObject documentation](https://popper.js.org/popper-documentation.html#referenceObject), this implies that you may also provide a real HTMLElement if needed.\n\nIf `referenceElement` is defined, it will take precedence over any `referenceProps.ref` provided refs.\n\n```jsx\nimport { Popper } from 'react-popper';\n\nclass VirtualReference {\n  getBoundingClientRect() {\n    return {\n      top: 10,\n      left: 10,\n      bottom: 20,\n      right: 100,\n      width: 90,\n      height: 10,\n    };\n  }\n\n  get clientWidth() {\n    return this.getBoundingClientRect().width;\n  }\n\n  get clientHeight() {\n    return this.getBoundingClientRect().height;\n  }\n}\n\n// This is going to create a virtual reference element\n// positioned 10px from top and left of the document\n// 90px wide and 10px high\nconst virtualReferenceElement = new VirtualReference();\n\n// This popper will be positioned relatively to the\n// virtual reference element defined above\nconst Example = () => (\n  <Popper referenceElement={virtualReferenceElement}>\n    {({ ref, style, placement, arrowProps }) => (\n      <div ref={ref} style={style} data-placement={placement}>\n        Popper element\n        <div ref={arrowProps.ref} style={arrowProps.style} />\n      </div>\n    )}\n  </Popper>\n);\n```\n\n## Flow and TypeScript types\n\nThis library is built with Flow but it supports TypeScript as well.\n\nYou can find the exported Flow types in `src/index.js`, and the\nTypeScript definitions in `typings/react-popper.d.ts`.\n\n## Running Locally\n\n#### clone repo\n\n`git clone git@github.com:FezVrasta/react-popper.git`\n\n#### move into folder\n\n`cd ~/react-popper`\n\n#### install dependencies\n\n`npm install` or `yarn`\n\n#### run dev mode\n\n`npm run demo:dev` or `yarn demo:dev`\n\n#### open your browser and visit:\n\n`http://localhost:1234/`\n","_attachments":{},"homepage":"https://github.com/souporserious/react-popper","bugs":{"url":"https://github.com/souporserious/react-popper/issues"},"license":"MIT"}