{"_id":"@bobgy/react-sticky","_rev":"3-b46aa02c09ee0bea297a9f466ce51131","name":"@bobgy/react-sticky","dist-tags":{"latest":"6.2.0"},"versions":{"6.0.3":{"name":"@bobgy/react-sticky","version":"6.0.3","description":"Sticky component for React","main":"lib/index.js","scripts":{"clean":"rimraf lib","compile":"babel src --loose --out-dir lib","demos:start":"webpack-dev-server --watch","demos:build":"NODE_ENV=production webpack -p","prepublish":"npm run prepare","prepare":"npm run clean && npm run compile","test":"mocha test/setup.js test/spec/*.js"},"repository":{"type":"git","url":"git+https://github.com/Bobgy/react-sticky.git"},"keywords":["react-component","React","Sticky"],"author":{"name":"Captivation Software"},"license":"MIT","homepage":"https://github.com/captivationsoftware/react-sticky","dependencies":{"prop-types":"^15.5.8","raf":"^3.3.0"},"peerDependencies":{"react":">=15","react-dom":">=15"},"devDependencies":{"babel-cli":"^6.23.1","babel-core":"^6.23.1","babel-loader":"^6.2.10","babel-plugin-transform-class-properties":"^6.23.0","babel-preset-es2015":"^6.22.0","babel-preset-react":"^6.5.0","babel-preset-stage-0":"^6.5.0","chai":"^4","enzyme":"^2.8.2","jsdom":"8.0.4","mocha":"^5","react":"^15.5.4","react-dom":"^15.5.4","react-router-dom":"^4.2.2","react-test-renderer":"^15.5.4","rimraf":"^2.5.2","webpack":"^3.11.0","webpack-dev-server":"^2.11.1"},"bugs":{"url":"https://github.com/captivationsoftware/react-sticky/issues"},"directories":{"example":"examples","lib":"lib","test":"test"},"gitHead":"0132248936bb7ddbba9cd662a26e924dbd07e1ea","_id":"@bobgy/react-sticky@6.0.3","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"bobgy","email":"gongyuan94@gmail.com"},"dist":{"integrity":"sha512-rbVK2NnT4AHWCc4h97db3KSzEt0hzRX3Z5Zr+3vE5RyuZwhdnY3PrlQM1GCcoTRU3rVRodINnioJuzmxIAXpLQ==","shasum":"30bfae183b8e17da8a8d1a5d04f33e9570edb8ed","tarball":"https://registry.npmjs.org/@bobgy/react-sticky/-/react-sticky-6.0.3.tgz","fileCount":12,"unpackedSize":221760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcAj/NCRA9TVsSAnZWagAAVk8P/ijexCOlpHMk/JrhqV1C\nRhwZC6M9tI4XMqbMgiE/tkKSKUycSrVsVw95S4rTTmaQOYsTtdbKai7akoh3\nN+nUiBdqcftCbUodrFTYlNeJn74NTJyXLYHqlyG4+CfyTfK9JqnLFqqUyilz\nXgsmLIf+wJGLe1Tx6edsJFiZ65BK3eacQk/bM94SXj5sJF3P+k7PZg+1MUu3\n0LWq7PNb4MQ3jpWwa0u35yJmGHzK59kbQw5Y1hj69evctO/i9UfniGh9R0GD\nMz+Akpm1xted9I89zLRvJgDbaKxilsgjhdHVm1PYdK1uaCHOok34fscFLakn\nU+pKTYGKUBkekiJydgzKXdKbou0VunB0eTWSRSjLOw/AJcVGFzqSe5eZ1MtS\nzDFrhtzW5lGCcbQwf1OkouuLOBWa/19hLtywuCBe0/slT2npniycGsS7NZoL\nNz8VS2LU9XtmzFRgsQP5+T3HG4onKewnKRai5bHY48ZMk8BkJpJ3l0GMUsYZ\nvrYWZC7IrWiJC0imgxKeFRVvtZnyxIJrZTSRkrFWXnKAv1RhqeB9MZw+tc2V\neKhvv1uzqQS50rqkq8/SrhqwjkXfQaXvZCMQUJaO6DRJhURW7itpm1XLQdx2\ncdW/Iu/w5YhsM8eZA5fbxFPG6EQqpwY/7IFBw0Fj6SxFCp+3PhwHRdszwZJg\n2H6m\r\n=Lkbb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBUxOtESNjTc1KR5sSu7IGl2Yn6Krr7tymnhpvOtXdzCAiEA1yBBMSzJX44JClQShegJxRV8hi1otRgBIuWDqF/dMe0="}]},"maintainers":[{"name":"bobgy","email":"gongyuan94@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-sticky_6.0.3_1543651277041_0.37789472414527836"},"_hasShrinkwrap":false},"6.0.4":{"name":"@bobgy/react-sticky","version":"6.0.4","description":"Sticky component for React","main":"lib/index.js","scripts":{"clean":"rimraf lib","compile":"babel src --loose --out-dir lib","demos:start":"webpack-dev-server --watch","demos:build":"NODE_ENV=production webpack -p","prepublish":"npm run prepare","prepare":"npm run clean && npm run compile","test":"mocha test/setup.js test/spec/*.js"},"repository":{"type":"git","url":"git+https://github.com/Bobgy/react-sticky.git"},"keywords":["react-component","React","Sticky"],"author":{"name":"Captivation Software"},"license":"MIT","homepage":"https://github.com/captivationsoftware/react-sticky","dependencies":{"prop-types":"^15.5.8","raf":"^3.3.0"},"peerDependencies":{"react":">=15","react-dom":">=15"},"devDependencies":{"babel-cli":"^6.23.1","babel-core":"^6.23.1","babel-loader":"^6.2.10","babel-plugin-transform-class-properties":"^6.23.0","babel-preset-es2015":"^6.22.0","babel-preset-react":"^6.5.0","babel-preset-stage-0":"^6.5.0","chai":"^4","enzyme":"^2.8.2","jsdom":"8.0.4","mocha":"^5","react":"^15.5.4","react-dom":"^15.5.4","react-router-dom":"^4.2.2","react-test-renderer":"^15.5.4","rimraf":"^2.5.2","webpack":"^3.11.0","webpack-dev-server":"^2.11.1"},"bugs":{"url":"https://github.com/captivationsoftware/react-sticky/issues"},"directories":{"example":"examples","lib":"lib","test":"test"},"gitHead":"252c1c5637346140aca6b96d51925d2278b29ec1","_id":"@bobgy/react-sticky@6.0.4","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"bobgy","email":"gongyuan94@gmail.com"},"dist":{"integrity":"sha512-Krhw+MyqUkxIYknRWI/gO5ZxdPWyWwcypI/jR7ZdSFF4d96tavKLcJvNNpBu4zuqMDqPk05fd8ku6QgtYEdYMQ==","shasum":"66eb3cb0234ce5091614f77cf2c056a5d012cdcf","tarball":"https://registry.npmjs.org/@bobgy/react-sticky/-/react-sticky-6.0.4.tgz","fileCount":12,"unpackedSize":222106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcAkwGCRA9TVsSAnZWagAAlbwP/ihhj6TGuLoTJo8St+Rp\nDoFnCgWqxWZmlwauliB5GhmFyW/zYu7tIIIA0eYiFefinm/S6M8vk01c9Zwy\nhnQ6yM75NHlB0AYOdhNcxiR6qsYQFSLgxXVuYgO+Lj2ZiwOxMazo/Ug/CdEQ\nKAqMQ/ihQP+bEWaoW3aQzzLKPk+jZiBkU/NfloozxQZBMjUVulKPQkAj9ZzT\nhhzBtOh9MKyz27hf/fK/vJW8oGg6ff92nyZvghe+clvFmbyV/qocdBkM9Dis\nYv45/SWGX9lgf+DbkHUs/GCLOAktl4JoXqTFLGRuKLmJuJ311ZzzUnTej6ZZ\nhIbBsfVx/ijL02QgwK55lOgfcRXiEdioMPAcH9HrMRNGHqtVgKmYMet3Ykuz\neyOX0/z8SYIMWOmxCh8ZTNZ6J3OfzE803r05Hj7nJg7qfaIz+HrlJgSy6etI\nVTFdZcolY+sPPd6mnR7G7A3vjyo0FekW2c1hUvV3JKRpqAhQgFOUbWul7l/2\n4/FOFab1nYG5XUuR6Ym5+XAKYwJ+BG08z5FSSlj9zTr85dFK6n1olLWQzjVd\nfwuUkwzyjQ1KYd3/EPf5bw3XyrW+Vb1bdg6X3D7RuW7NEUD4yoPUV9/EhK9a\n54CqFuJYE9Ju56OS3Lhte2H7epzLD5sNMdnz8fiFmMqoU32S7+8aNjPnCw9Z\nqDny\r\n=AV+M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5mss63TpBuJKK3cpbEJ30iouJLc2Ro8nwe5cUBkyiRQIgDXSlGV1GAJnJ1PI5s0wYN239q8lre+qY2w8t7DnN4kY="}]},"maintainers":[{"name":"bobgy","email":"gongyuan94@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-sticky_6.0.4_1543654405717_0.25536885001573073"},"_hasShrinkwrap":false},"6.2.0":{"name":"@bobgy/react-sticky","version":"6.2.0","description":"Sticky component for React","main":"lib/index.js","scripts":{"clean":"rimraf lib","compile":"babel src --loose --out-dir lib","demos:start":"webpack-dev-server --watch","demos:build":"NODE_ENV=production webpack -p","prepublish":"npm run prepare","prepare":"npm run clean && npm run compile","test":"mocha test/setup.js test/spec/*.js"},"repository":{"type":"git","url":"git+https://github.com/Bobgy/react-sticky.git"},"keywords":["react-component","React","Sticky"],"author":{"name":"Captivation Software"},"license":"MIT","homepage":"https://github.com/captivationsoftware/react-sticky","dependencies":{"prop-types":"^15.5.8","raf":"^3.3.0"},"peerDependencies":{"react":">=15","react-dom":">=15"},"devDependencies":{"babel-cli":"^6.23.1","babel-core":"^6.23.1","babel-loader":"^6.2.10","babel-plugin-transform-class-properties":"^6.23.0","babel-preset-es2015":"^6.22.0","babel-preset-react":"^6.5.0","babel-preset-stage-0":"^6.5.0","chai":"^4","enzyme":"^2.8.2","jsdom":"8.0.4","mocha":"^5","react":"^15.5.4","react-dom":"^15.5.4","react-router-dom":"^4.2.2","react-test-renderer":"^15.5.4","rimraf":"^2.5.2","webpack":"^3.11.0","webpack-dev-server":"^2.11.1"},"bugs":{"url":"https://github.com/captivationsoftware/react-sticky/issues"},"directories":{"example":"examples","lib":"lib","test":"test"},"gitHead":"c8a49380dd400f73c70a4ab952cf1bcbf24dbcb1","_id":"@bobgy/react-sticky@6.2.0","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"bobgy","email":"gongyuan94@gmail.com"},"dist":{"integrity":"sha512-bbVx0IacFLbzHSpWPstsN/m0Z1NWou+6TWCfEoE9hu1P3OcDNsaWE3IGoxIsW1ZGyNR1jkMie9ZWdl2PpUsO1A==","shasum":"89415a52e55c24b5dcf93cc91be0d29367bb0f60","tarball":"https://registry.npmjs.org/@bobgy/react-sticky/-/react-sticky-6.2.0.tgz","fileCount":12,"unpackedSize":222408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcAl3xCRA9TVsSAnZWagAAaIMP/3MJrMeOzweuRMG4RAj7\nchhe0u0V17+YauYDVvLZbrpOygpRxt0g7mfDZiZz/W05CFhw9YBO00gwuXsi\nSKKW9/gYI9vURbODEAVgPXzh9ZBQed0qFV6CCU51KF1bW426tsqkkG4h3Dfq\nRiIDj8jswjM0u3yXdPr20jgEl4rLUkITwGe2xs5ho7g6k64L4TX/PNdX1zvl\naAdRjoMbnBkOYvo4yByh/We/jb/vxIeLH8b/QFf2+n7MTM0Vuhg3cSuIlnLE\nWOvZZkeWItvEYvdcF6EvskLscQAy+ctovRW9xrjbosnuqBLN7fwsOQif0aUo\nWaBXmoKHS4mYuq1P4WbW6oCb4EtZofKUkO73qmzi43+FLOAXnAlM6pVrKsXR\nVl1BxAwCiXNB8n9Yj32ZMXD+KbVjya9ie0WVQ2m7uKigNlz4jcl+HCyBqjdu\nhyhpR5pd4UEFj6ZWNT7ZNIagVO/mApz9fcrYuoI+QcraJ9C3RybO7n+oqDOK\nakwq34f14FTGfE18UK8FiWR5vYPpyJs8InBxAqfoa9XbJeQUP+7j+GylGM54\n4l1iU9xOZ9mSfdKAg8/mmQFS60G0XFBELq7UG8DJvl8c15VqLc2n7/x2VwIP\nEm7qNbCkh3EVcgkGD4/LO0ybuUOTOA/yPpx2UHSVQVbywCq74QXzMU3+7lkF\n8cnv\r\n=b2Ci\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDp5vStT6yFWQ4Es+mMo3VcaQY+Zra+NU5nrTaQphqrHwIhAIB8hbZfLx5+vkFFKe79UcWcHHUUaP/ZDo3u4Ngd+gqY"}]},"maintainers":[{"name":"bobgy","email":"gongyuan94@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-sticky_6.2.0_1543658993140_0.5146705952141037"},"_hasShrinkwrap":false}},"time":{"created":"2018-12-01T08:01:16.872Z","6.0.3":"2018-12-01T08:01:17.230Z","modified":"2022-04-04T19:55:24.969Z","6.0.4":"2018-12-01T08:53:25.861Z","6.2.0":"2018-12-01T10:09:53.313Z"},"maintainers":[{"name":"bobgy","email":"gongyuan94@gmail.com"}],"description":"Sticky component for React","homepage":"https://github.com/captivationsoftware/react-sticky","keywords":["react-component","React","Sticky"],"repository":{"type":"git","url":"git+https://github.com/Bobgy/react-sticky.git"},"author":{"name":"Captivation Software"},"bugs":{"url":"https://github.com/captivationsoftware/react-sticky/issues"},"license":"MIT","readme":"# react-sticky [![Build Status](https://travis-ci.org/captivationsoftware/react-sticky.svg?branch=master)](https://travis-ci.org/captivationsoftware/react-sticky)\n\n## NOTE: This is a forked version of react-sticky that supports using a dom node other than window.document.body as scrolling container\n\nMake your React components sticky!\n\n#### Demos\n\n- [Basic](http://react-sticky.netlify.com/#/basic)\n- [Relative](http://react-sticky.netlify.com/#/relative)\n- [Stacked](http://react-sticky.netlify.com/#/stacked)\n\n#### Version 6.x Highlights\n\n- Completely redesigned to support sticky behavior via higher-order component, giving you ultimate control of implementation details\n- Features a minimal yet efficient API\n- Drops support for versions of React < 15.3. If you are using an earlier version of React, continue to use the 5.x series\n\n#### CSS\n\nThere's a CSS alternative to `react-sticky`: the `position: sticky` feature. However it currently does not have [full browser support](https://caniuse.com/#feat=css-sticky), specifically a lack of IE11 support and some bugs with table elements. Before using `react-sticky`, check to see if the browser support and restrictions prevent you from using `position: sticky`, as CSS will always be faster and more durable than a JS implementation.\n\n```css\nposition: -webkit-sticky;\nposition: sticky;\ntop: 0;\n```\n\n## Installation\n\n```sh\nnpm install react-sticky\n```\n\n## Overview & Basic Example\n\nThe goal of `react-sticky` is make it easier for developers to build UIs that have sticky elements. Some examples include a sticky navbar, or a two-column layout where the left side sticks while the right side scrolls.\n\n`react-sticky` works by calculating the position of a `<Sticky>` component relative to a `<StickyContainer>` component. If it would be outside the viewport, the styles required to affix it to the top of the screen are passed as an argument to a render callback, a function passed as a child.\n\n```js\n<StickyContainer>\n  <Sticky>{({ style }) => <h1 style={style}>Sticky element</h1>}</Sticky>\n</StickyContainer>\n```\n\nThe majority of use cases will only need the style to pass to the DOM, but some other properties are passed for advanced use cases:\n\n- `style` _(object)_ - modifiable style attributes to optionally be passed to the element returned by this function. For many uses, this will be the only attribute needed.\n- `isSticky` _(boolean)_ - is the element sticky as a result of the current event?\n- `wasSticky` _(boolean)_ - was the element sticky prior to the current event?\n- `distanceFromTop` _(number)_ - number of pixels from the top of the `Sticky` to the nearest `StickyContainer`'s top\n- `distanceFromBottom` _(number)_ - number of pixels from the bottom of the `Sticky` to the nearest `StickyContainer`'s bottom\n- `calculatedHeight` _(number)_ - height of the element returned by this function\n\nThe `Sticky`'s child function will be called when events occur in the parent `StickyContainer`,\nand will serve as the callback to apply your own logic and customizations, with sane `style` attributes\nto get you up and running quickly.\n\n### Full Example\n\nHere's an example of all of those pieces together:\n\napp.js\n\n```js\nimport React from 'react';\nimport { StickyContainer, Sticky } from 'react-sticky';\n// ...\n\nclass App extends React.Component {\n  render() {\n    return (\n      <StickyContainer>\n        {/* Other elements can be in between `StickyContainer` and `Sticky`,\n        but certain styles can break the positioning logic used. */}\n        <Sticky>\n          {({\n            style,\n\n            // the following are also available but unused in this example\n            isSticky,\n            wasSticky,\n            distanceFromTop,\n            distanceFromBottom,\n            calculatedHeight\n          }) => (\n            <header style={style}>\n              {/* ... */}\n            </header>\n          )}\n        </Sticky>\n        {/* ... */}\n      </StickyContainer>\n    );\n  },\n};\n```\n\nWhen the \"stickiness\" becomes activated, the arguments to the sticky function\nare modified. Similarly, when deactivated, the arguments will update accordingly.\n\n### `<StickyContainer />` Props\n\n`<StickyContainer />` supports all valid `<div />` props.\n\n### `<Sticky />` Props\n\n#### relative _(default: false)_\n\nSet `relative` to `true` if the `<Sticky />` element will be rendered within\nan overflowing `<StickyContainer />` (e.g. `style={{ overflowY: 'auto' }}`) and you want\nthe `<Sticky />` behavior to react to events only within that container.\n\nWhen in `relative` mode, `window` events will not trigger sticky state changes. Only scrolling\nwithin the nearest `StickyContainer` can trigger sticky state changes.\n\n#### topOffset _(default: 0)_\n\nSticky state will be triggered when the top of the element is `topOffset` pixels from the top of the closest `<StickyContainer />`. Positive numbers give the impression of a lazy sticky state, whereas negative numbers are more eager in their attachment.\n\napp.js\n\n```js\n<StickyContainer>\n  ...\n  <Sticky topOffset={80}>\n    { props => (...) }\n  </Sticky>\n  ...\n</StickyContainer>\n```\n\nThe above would result in an element that becomes sticky once its top is greater than or equal to 80px away from the top of the `<StickyContainer />`.\n\n#### bottomOffset _(default: 0)_\n\nSticky state will be triggered when the bottom of the element is `bottomOffset` pixels from the bottom of the closest `<StickyContainer />`.\n\napp.js\n\n```js\n<StickyContainer>\n  ...\n  <Sticky bottomOffset={80}>\n    { props => (...) }\n  </Sticky>\n  ...\n</StickyContainer>\n```\n\nThe above would result in an element that ceases to be sticky once its bottom is 80px away from the bottom of the `<StickyContainer />`.\n\n#### disableCompensation _(default: false)_\n\nSet `disableCompensation` to `true` if you do not want your `<Sticky />` to apply padding to\na hidden placeholder `<div />` to correct \"jumpiness\" as attachment changes from `position:fixed`\nand back.\n\napp.js\n\n```js\n<StickyContainer>\n  ...\n  <Sticky disableCompensation>\n    { props => (...) }\n  </Sticky>\n  ...\n</StickyContainer>\n```\n\n#### disableHardwareAcceleration _(default: false)_\n\nWhen `disableHardwareAcceleration` is set to `true`, the `<Sticky />` element will not use hardware acceleration (e.g. `transform: translateZ(0)`). This setting is not recommended as it negatively impacts\nthe mobile experience, and can usually be avoided by improving the structure of your DOM.\n\napp.js\n\n```js\n<StickyContainer>\n  ...\n  <Sticky disableHardwareAcceleration>\n    { props => (...) }\n  </Sticky>\n  ...\n</StickyContainer>\n```\n","readmeFilename":"README.md"}