{"bugs":{"url":"https://github.com/souporserious/react-popper/issues"},"dist":{"shasum":"cc7f2ef162a1ab1116f8d7ecd276a7bffddc940a","tarball":"https://registry.npmjs.org/react-popper/-/react-popper-0.9.0.tgz","fileCount":11,"integrity":"sha512-tzBs8B26JOqg+ie5r6y/MJNqKYCXSYEUXFGo1T/RWyS9atC/uS5RH9IXgXLFm5mddLylDJ5zQMq835yNphc3zg==","signatures":[{"sig":"MEUCIErNBd0iKf+mJvkQby+rRoipH8xcOgXCIUwE7kwxCwpJAiEAsvuiQIiuBMp7SXFJ48zXvW0EL11bh3Ky9KiNlpzDwfE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63557},"main":"dist/react-popper.js","name":"react-popper","files":["dist","lib"],"types":"react-popper.d.ts","author":{"url":"http://souporserious.com","name":"Travis Arnold","email":"travis@souporserious.com"},"module":"lib/react-popper.js","readme":"## React Popper\n\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[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\nReact wrapper around [PopperJS](https://github.com/FezVrasta/popper.js/).\n\n## Install\n\n`npm install react-popper --save` or `yarn add react-popper`\n\n```html\n\n(UMD library exposed as `ReactPopper`)\n```\n\n## Usage\n\n```js\nimport { Manager, Target, Popper, Arrow } from 'react-popper'\n\nconst PopperExample = () => (\n \n \n Target Box\n \n \n Left Content\n \n \n \n Right Content\n \n \n \n)\n```\n\n## Usage with 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 'react-popper'\n\nconst PopperExample = () => (\n \n \n {({ targetProps }) => (\n
\n Target Box\n
\n )}\n \n \n {({ popperProps, restProps }) => (\n \n Popper Content\n \n {({ arrowProps, restProps }) => (\n \n )}\n \n \n )}\n \n \n)\n```\n\n## Usage without Manager\n\nIt's generally easiest to let the `Manager` and `Target` components handle passing the target DOM element to the `Popper` component. However, you can pass a target [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or a [referenceObject](https://popper.js.org/popper-documentation.html#referenceObject) directly into `Popper` if you need to.\n\nHandling DOM Elements from React can be complicated. The `Manager` and `Target` components handle these complexities for you, so their use is strongly recommended when using DOM Elements.\n\n```js\nimport { PureComonent } from 'react'\nimport { Popper, Arrow } from 'react-popper'\n\nclass StandaloneExample extends PureComponent {\n state = {\n isOpen: false,\n }\n\n handleClick() = () => {\n this.setState(prevState => ({\n isOpen: !prevState.isOpen\n }))\n }\n\n render() {\n return (\n
\n this.target = div}\n style={{ width: 120, height: 120, background: '#b4da55' }}\n onClick={this.handleClick}\n >\n Click {this.state.isOpen ? 'to hide' : 'to show'} popper\n
\n {this.state.isOpen && (\n \n Popper Content\n \n \n )}\n \n )\n }\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 either be wrapped in a `Manager`, or passed a `target` prop directly. Each `Manager` can wrap multiple `Popper` components.\n\n#### `placement`: PropTypes.oneOf(Popper.placements)\n#### `eventsEnabled`: PropTypes.bool\n#### `modifiers`: PropTypes.object\n#### `target`: PropTypes.oneOfType([PropTypes.instanceOf(Element), Popper.referenceObject])\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 Locally\n\n#### clone repo\n\n`git clone git@github.com:souporserious/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 dev` or `yarn dev`\n\n#### open your browser and visit:\n`http://localhost:8080/`\n","gitHead":"645ccaf56f590fcdbd9b67bc13a40453c63b320f","license":"MIT","scripts":{"demo":"parcel --out-dir demo/dist demo/index.html","lint":"eslint --ext .js,.jsx src/ example/","build":"npm run build:clean && npm run build:es && npm run build:umd && npm run build:cjs","format":"npm run lint -- --fix --quiet","prepare":"npm run build","build:es":"babel src --out-dir lib && mv lib/index.js lib/react-popper.js","build:cjs":"rollup -c --output.format cjs --output.name 'react-popper' --output.file dist/react-popper.js","build:umd":"rollup -c --output.format umd --output.name 'react-popper' --output.file dist/react-popper.umd.js","precommit":"lint-staged","build:clean":"rm -rf dist/ && rm -rf lib/"},"_npmUser":{"name":"fezvrasta","email":"federico.zivolo@gmail.com"},"homepage":"https://github.com/souporserious/react-popper","keywords":["react","react-popper","popperjs","component","drop","tooltip","popover"],"umd:main":"dist/react-popper.umd.js","repository":{"url":"git+https://github.com/souporserious/react-popper.git","type":"git"},"_npmVersion":"5.6.0","description":"React wrapper around PopperJS.","directories":{},"lint-staged":{"@(src|example)/**/*.{js,jsx}":["eslint --fix --max-warnings 5","git add"]},"maintainers":[{"name":"fezvrasta","email":"federico.zivolo@gmail.com"},{"name":"souporserious","email":"ftntravis@gmail.com"}],"_nodeVersion":"8.9.4","dependencies":{"popper.js":"^1.14.1","prop-types":"^15.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"outy":"^0.1.2","react":"15.3.2","glamor":"^2.20.24","rollup":"^0.57.1","chokidar":"^1.6.1","babel-cli":"^6.26.0","glamorous":"^3.11.1","react-dom":"15.3.2","babel-core":"^6.26.0","react-portal":"^4.1.4","react-travel":"^1.3.0","react-measure":"^1.4.6","parcel-bundler":"^1.6.2","velocity-react":"^1.2.2","babel-preset-env":"^1.6.1","node-libs-browser":"^1.0.0","babel-preset-react":"^6.24.1","rollup-plugin-babel":"^3.0.3","babel-preset-stage-2":"^6.24.1","react-motion-ui-pack":"^0.10.2","create-styled-element":"^0.4.0","rollup-plugin-replace":"^2.0.0","react-transition-group":"^2.2.1","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-globals":"^1.2.0","rollup-plugin-node-resolve":"^3.3.0","babel-plugin-external-helpers":"^6.22.0","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-react-remove-prop-types":"^0.4.13"},"peerDependencies":{"react":"0.14.x || ^15.0.0 || ^16.0.0","react-dom":"0.14.x || ^15.0.0 || ^16.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-popper_0.9.0_1521818674923_0.5721557609374517","host":"s3://npm-registry-packages"},"_id":"react-popper@0.9.0","version":"0.9.0"}