{"_id":"react-perimeter","_rev":"3267761","name":"react-perimeter","description":"Create an invisible padding around an element and respond when its breached.","dist-tags":{"latest":"0.4.0"},"maintainers":[{"name":"aweary","email":""}],"time":{"modified":"2024-03-21T10:00:48.000Z","created":"2017-03-17T01:50:49.418Z","0.4.0":"2017-09-15T16:23:29.175Z","0.3.1":"2017-04-17T05:30:27.340Z","0.3.0":"2017-03-27T20:33:25.571Z","0.2.0":"2017-03-17T14:17:15.807Z","0.1.0":"2017-03-17T01:50:49.418Z"},"users":{},"author":{"name":"Brandon Dail","email":"brandon.dail@formidable.com","url":"https://www.twitter.com/aweary"},"repository":{"type":"git","url":"git+https://github.com/aweary/react-perimeter.git"},"versions":{"0.4.0":{"name":"react-perimeter","version":"0.4.0","main":"lib/index.js","license":"MIT","scripts":{"build":"rimraf lib && babel src --out-dir lib","prepublish":"npm run build","test":"jest"},"repository":{"type":"git","url":"git+https://github.com/aweary/react-perimeter.git"},"author":{"name":"Brandon Dail","email":"brandon.dail@formidable.com","url":"https://www.twitter.com/aweary"},"devDependencies":{"babel-cli":"^6.24.0","babel-plugin-transform-class-properties":"^6.23.0","babel-preset-env":"^1.2.2","babel-preset-react":"^6.23.0","enzyme":"^2.7.1","flow-bin":"^0.41.0","jest":"^19.0.2","react":"^15.4.2","react-addons-test-utils":"^15.4.2","react-dom":"^15.4.2","rimraf":"^2.6.1"},"peerDependencies":{"prop-types":"^15.5.8","react":"^15.4.2","react-dom":"^15.4.2"},"optionalDependencies":{"react-listener-provider":"^0.2.0"},"gitHead":"99073ec46d819efc2a4424ed5d33a298cafea42b","description":"Create an invisible padding around an element and respond when its breached.","bugs":{"url":"https://github.com/aweary/react-perimeter/issues"},"homepage":"https://github.com/aweary/react-perimeter#readme","dependencies":{"react-listener-provider":"^0.2.0"},"_id":"react-perimeter@0.4.0","_npmVersion":"5.4.2","_nodeVersion":"8.4.0","_npmUser":{"name":"aweary","email":"Kierkegaurd@gmail.com"},"dist":{"shasum":"be86b5560bb96650272aaf7bd37639460b82645b","size":69756,"noattachment":false,"key":"/react-perimeter/-/react-perimeter-0.4.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-perimeter/download/react-perimeter-0.4.0.tgz"},"maintainers":[{"name":"aweary","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-perimeter-0.4.0.tgz_1505492608496_0.9055790966376662"},"directories":{},"_cnpmcore_publish_time":"2021-12-21T03:03:50.728Z","publish_time":1505492609175,"_cnpm_publish_time":1505492609175},"0.3.1":{"name":"react-perimeter","version":"0.3.1","main":"lib/index.js","license":"MIT","scripts":{"build":"rimraf lib && babel src --out-dir lib","prepublish":"npm run build","test":"jest"},"repository":{"type":"git","url":"git+https://github.com/aweary/react-perimeter.git"},"author":{"name":"Brandon Dail","email":"brandon.dail@formidable.com","url":"https://www.twitter.com/aweary"},"devDependencies":{"babel-cli":"^6.24.0","babel-plugin-transform-class-properties":"^6.23.0","babel-preset-env":"^1.2.2","babel-preset-react":"^6.23.0","enzyme":"^2.7.1","flow-bin":"^0.41.0","jest":"^19.0.2","react":"^15.4.2","react-addons-test-utils":"^15.4.2","react-dom":"^15.4.2","rimraf":"^2.6.1"},"peerDependencies":{"react":"^15.4.2","react-dom":"^15.4.2"},"optionalDependencies":{"react-listener-provider":"^0.1.2"},"gitHead":"f88051502db7a3bc320c69b616d6888a6a38adb0","description":"Create an invisible padding around an element and respond when its breached.","bugs":{"url":"https://github.com/aweary/react-perimeter/issues"},"homepage":"https://github.com/aweary/react-perimeter#readme","dependencies":{"react-listener-provider":"^0.1.2"},"_id":"react-perimeter@0.3.1","_shasum":"ff8b8b48dcc05828fec53c0ed40697edb260a1f8","_from":".","_npmVersion":"4.1.2","_nodeVersion":"7.7.4","_npmUser":{"name":"aweary","email":"Kierkegaurd@gmail.com"},"dist":{"shasum":"ff8b8b48dcc05828fec53c0ed40697edb260a1f8","size":36109,"noattachment":false,"key":"/react-perimeter/-/react-perimeter-0.3.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-perimeter/download/react-perimeter-0.3.1.tgz"},"maintainers":[{"name":"aweary","email":""}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-perimeter-0.3.1.tgz_1492407025366_0.5468852447811514"},"directories":{},"_cnpmcore_publish_time":"2021-12-21T03:03:50.200Z","publish_time":1492407027340,"_cnpm_publish_time":1492407027340},"0.3.0":{"name":"react-perimeter","version":"0.3.0","main":"lib/index.js","license":"MIT","scripts":{"build":"rimraf lib && babel src --out-dir lib","prepublish":"npm run build","test":"jest"},"repository":{"type":"git","url":"git+https://github.com/aweary/react-perimeter.git"},"author":{"name":"Brandon Dail","email":"brandon.dail@formidable.com","url":"https://www.twitter.com/aweary"},"devDependencies":{"babel-cli":"^6.24.0","babel-plugin-transform-class-properties":"^6.23.0","babel-preset-env":"^1.2.2","babel-preset-react":"^6.23.0","enzyme":"^2.7.1","flow-bin":"^0.41.0","jest":"^19.0.2","react":"^15.4.2","react-addons-test-utils":"^15.4.2","react-dom":"^15.4.2","rimraf":"^2.6.1"},"peerDependencies":{"react":"^15.4.2","react-dom":"^15.4.2"},"optionalDependencies":{"react-listener-provider":"^0.1.2"},"gitHead":"8345bae0564f1470d9e2184bb2dd8718ab2ebd59","description":"Create an invisible padding around an element and respond when its breached.","bugs":{"url":"https://github.com/aweary/react-perimeter/issues"},"homepage":"https://github.com/aweary/react-perimeter#readme","dependencies":{"react-listener-provider":"^0.1.2"},"_id":"react-perimeter@0.3.0","_shasum":"489ef316f5d4160fb5188d7759f1f32d652a3fbf","_from":".","_npmVersion":"4.1.2","_nodeVersion":"7.7.3","_npmUser":{"name":"aweary","email":"Kierkegaurd@gmail.com"},"dist":{"shasum":"489ef316f5d4160fb5188d7759f1f32d652a3fbf","size":36106,"noattachment":false,"key":"/react-perimeter/-/react-perimeter-0.3.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-perimeter/download/react-perimeter-0.3.0.tgz"},"maintainers":[{"name":"aweary","email":""}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-perimeter-0.3.0.tgz_1490646805347_0.16031134454533458"},"directories":{},"_cnpmcore_publish_time":"2021-12-21T03:03:49.097Z","publish_time":1490646805571,"_cnpm_publish_time":1490646805571},"0.2.0":{"name":"react-perimeter","version":"0.2.0","main":"lib/index.js","license":"MIT","scripts":{"build":"rimraf lib && babel src --out-dir lib","prepublish":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/aweary/react-perimeter.git"},"author":{"name":"Brandon Dail","email":"brandon.dail@formidable.com","url":"https://www.twitter.com/aweary"},"devDependencies":{"babel-cli":"^6.24.0","babel-plugin-transform-class-properties":"^6.23.0","babel-preset-env":"^1.2.2","babel-preset-react":"^6.23.0","flow-bin":"^0.41.0","rimraf":"^2.6.1"},"peerDependencies":{"react":"^15.4.2","react-dom":"^15.4.2"},"gitHead":"3f1738032b86bed302717696460795f374be375f","description":"Create an invisible padding around an element and respond when its breached.","bugs":{"url":"https://github.com/aweary/react-perimeter/issues"},"homepage":"https://github.com/aweary/react-perimeter#readme","_id":"react-perimeter@0.2.0","_shasum":"4ed191757250c4094681d3f9a385987697827153","_from":".","_npmVersion":"4.1.2","_nodeVersion":"7.5.0","_npmUser":{"name":"aweary","email":"Kierkegaurd@gmail.com"},"dist":{"shasum":"4ed191757250c4094681d3f9a385987697827153","size":22619,"noattachment":false,"key":"/react-perimeter/-/react-perimeter-0.2.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-perimeter/download/react-perimeter-0.2.0.tgz"},"maintainers":[{"name":"aweary","email":""}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-perimeter-0.2.0.tgz_1489760233782_0.06924448092468083"},"directories":{},"_cnpmcore_publish_time":"2021-12-21T03:03:48.032Z","publish_time":1489760235807,"_cnpm_publish_time":1489760235807},"0.1.0":{"name":"react-perimeter","version":"0.1.0","main":"lib/index.js","license":"MIT","scripts":{"build":"rimraf lib && babel src --out-dir lib","prepublish":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/aweary/react-perimeter.git"},"author":{"name":"Brandon Dail","email":"brandon.dail@formidable.com","url":"https://www.twitter.com/aweary"},"devDependencies":{"babel-cli":"^6.24.0","babel-plugin-transform-class-properties":"^6.23.0","babel-preset-env":"^1.2.2","babel-preset-react":"^6.23.0","flow-bin":"^0.41.0","rimraf":"^2.6.1"},"peerDependencies":{"react":"^15.4.2","react-dom":"^15.4.2"},"gitHead":"6236b47f8777a4459172491fea1801b2abb4bf49","description":"Create an invisible boundry around an element and respond when its breached.","bugs":{"url":"https://github.com/aweary/react-perimeter/issues"},"homepage":"https://github.com/aweary/react-perimeter#readme","_id":"react-perimeter@0.1.0","_shasum":"9422b542eb6573b92587397f12063f0d99d3d5fc","_from":".","_npmVersion":"4.1.2","_nodeVersion":"7.5.0","_npmUser":{"name":"aweary","email":"Kierkegaurd@gmail.com"},"dist":{"shasum":"9422b542eb6573b92587397f12063f0d99d3d5fc","size":21089,"noattachment":false,"key":"/react-perimeter/-/react-perimeter-0.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-perimeter/download/react-perimeter-0.1.0.tgz"},"maintainers":[{"name":"aweary","email":""}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-perimeter-0.1.0.tgz_1489715447291_0.09152731788344681"},"directories":{},"_cnpmcore_publish_time":"2021-12-21T03:03:46.876Z","publish_time":1489715449418,"_cnpm_publish_time":1489715449418}},"readme":"# react-perimeter ????\n\nCreate an invisible padding around an element and respond when its breached.\n\n\n## Usage Example\n\n`react-perimeter` exports a single `Perimeter` component that will register a `mousemove` listener and calculate whether the current mouse position is within a padding.\n\nThe padding will be calculated using `getBoundingClientRect` and the `padding` prop, which lets you define \"padding\" for the perimeter.\n\n```jsx\n\n \n\n```\n\n`Perimeter` by default will wrap its children in a `span` and use that to calculate the boundries. If you want to avoid the wrapping `span`, or you want the padding to be calculated from another element, you can use a render callback.\n\n```jsx\n\n {ref => (\n Load More\n )}\n\n```\nThe render callback is passed a ref callback which should be passed to the `ref` prop of the element you want to use.\n\n## Installation\n\n```\nyarn add react-perimeter\n```\n\n\n## API\n\n### Props\n\nProperty \t| \tType\t\t|\tDefault\t\t|\t Description\n:-----------------------|:-----------------------------|:--------------|:--------------------------------\n`padding` | `number` | `0` | The buffer around the element that defines the padding of the perimeter\n`onBreach` | `() => void` | `undefined` | A callback to be invoked when the perimeter is breached\n`once` | `boolean` | `false` | Whether the callback should only be invoked once (for example, when prefetching some data or chunks). If true all event listeners will be removed after `onBreach` is called.\n`mapListeners` | `EventListener => EventListener` | `undefined` | If provided, each event listeners (`resize`, `mousemove`) will be passed in, and the returned function will be used instead.\n\n### Debouncing or Throttling\n\nYou may want to debounce or throttle the `mousemove` and `resize` event listeners if you've profiled your application and determined that they are noticeably affecting your performance. You can do so using the `mapListeners` prop, which takes a function that should accept an event listener and return a new function to be used instead.\n\n```jsx\n debounce(listener, 20)}>\n```\n\nBy letting you provide the mapped listener yourself, `react-perimeter` gives you full control over what debounce/throttle imeplementation you wish to use and its paramaters.\n\n\n### Deduping Event Listeners\n\nIf you use `react-perimeter` in multiple places in your application you may want to dedupe the internal event listeners.\n \n`react-perimiter` integrates with [react-listener-provider](https://github.com/jnsdls/react-listener-provider) to make deduping easy.\n Simply `yarn add react-listener-provider` and wrap your application like this:\n \n ```jsx\n import ReactListenerProvider from 'react-listener-provider';\n \n \n \n \n \n ```\n \n Any `` component you use inside of `` will automatically use the global event listener provided by `react-listener-provider` instead of registering its own.\n\n\n### Prefetching or Preloading\n\n`react-perimeter` shines especially bright when used to prefetch or preload other components. Here is a small example that uses [`react-loadable`](https://github.com/thejameskyle/react-loadable) and [`react-router`](https://github.com/ReactTraining/react-router) to preload a route chunk when the cursor gets near a link:\n\n```jsx\nimport React from 'react'\n// Assume this is the component returned from `react-loadable`, not the page itself\nimport OtherPage from './routes/other-page'\nimport Perimeter from 'react-perimeter'\nimport { Link } from 'react-router'\n\nconst App = () => (\n
\n

Home Page!

\n

Here's some content

\n \n Other Page\n \n
\n)\n\n```\n\n`react-loadable` provides an extremely useful static `preload` method that begins fetching the chunk for us. We pass this to `onBreach` so that\nthe preloading begins as soon as the mouse is within `100` pixels of the `Link` component. We also pass in the `once` prop to tell `react-perimeter`\nthat we only want to respond to the first breach. This means that, after the preload request has been issued, the listeners will be deregistered, removing any unneeded overhead.\n\nWe can go one step further and abstract this out into its own component, `PreloadLink`:\n\n```jsx\nconst PreloadLink = ({ to, children, preload }) => (\n \n {children}\n \n)\n```\n\n```jsx\n\n```\n","_attachments":{},"homepage":"https://github.com/aweary/react-perimeter#readme","bugs":{"url":"https://github.com/aweary/react-perimeter/issues"},"license":"MIT"}