{"_id":"@anubra266/stickyreact","_rev":"3-f7b6bdbfe81c39b57f1b083fa13174ee","name":"@anubra266/stickyreact","dist-tags":{"next":"0.1.1-0","latest":"1.0.1"},"versions":{"0.1.1-0":{"version":"0.1.1-0","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=10"},"scripts":{"start":"tsdx watch","build":"tsdx build","test":"tsdx test --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","analyze":"size-limit --why"},"peerDependencies":{"react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"name":"@anubra266/stickyreact","author":{"name":"anubra266"},"module":"dist/stickyreact.esm.js","size-limit":[{"path":"dist/stickyreact.cjs.production.min.js","limit":"10 KB"},{"path":"dist/stickyreact.esm.js","limit":"10 KB"}],"devDependencies":{"@size-limit/preset-small-lib":"^4.10.2","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","husky":"^6.0.0","react":"^17.0.2","react-dom":"^17.0.2","size-limit":"^4.10.2","tsdx":"^0.14.1","tslib":"^2.2.0","typescript":"^4.2.4"},"publishConfig":{"access":"public"},"description":"Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented with what’s here and how to use it.","licenseText":"MIT License\n\nCopyright (c) 2021 anubra266\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@anubra266/stickyreact@0.1.1-0","dist":{"shasum":"173bad0af1ff76c7ae8ca33da773e4cc864c6a9c","integrity":"sha512-4wthDmvyXiZ8763/JH8ZmjqwFkDWyPt5fi6hE0qjWNA6B3BfNNDqlxd0GQTeIkGn7RORNIVb5Ubd/yEtJuq8Yw==","tarball":"https://registry.npmjs.org/@anubra266/stickyreact/-/stickyreact-0.1.1-0.tgz","fileCount":19,"unpackedSize":105635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgghX9CRA9TVsSAnZWagAAGmMP/Alr+A/uY0NFSAyTjVGa\nrE1DaUMRgtgCfN7g6qbOQevNAyh2WZ888CMWAQY6Gae7IVQ4w9sd9EM8EZMS\nF7uqf4lrCYgc2OirghL7yPDLqDgnqgIQjG63DgNMFaoa/93YqxQ0v8JBQsIN\n/drBm2g3CJIwJWB6OqN2nJ5OgOJb/H0limQalTHEx/aA9Dg9RkxOizDcPVmu\ne+NdnaCWhuvuvo2IxxM1ANtTDSpU03zh1OlScFoJ1DewekBpl2dMgfcjexhQ\n3LuORIuiEGwex2ivSTAX9dPuucd/zEa4yY1lEYDp+wGUYpcUEfm9Ts5pxKJ9\nk+kMsAM/ys9jqYM1w8jPFu6LNQjniA/ymf1IOhv2xc22xDL5AhGN4AgFYROE\nsLjqawWVtnNeJjGto6zfbxHyHK5AR8IOZ65zmFbvujXkhZ2VdKn7l278BI4e\n6RfdKT73N800Xkzp5NZwodGEC75UkkcZcHYpstS0F6+8IQmD+jiFFymoj9Z6\nDDIHQmFeNcbeLyFb2DSU7sDSlA/yV/PxgvryZ/tT6GP6yUyBqESLzFuGfnmz\nMtnmSVfUagzpF9Y4GLf1awiS+p9oSMsCcisan9HAgCXcaYAJHDME65G8kruh\n+iddk6TCFI+I72B8O/uVcc8jPL4n8irBEh4hhFvBztR+1IN9GA5GWZM8Qfo1\nEgXp\r\n=sXO1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGu18Gk8LXGnQ1OuME6U2w7puQ/8rdFumy1p7iaJkH0EAiEAwDu5w0WwZpzLziMNasokLwdsTmiCnKErsbZHgZyNFJM="}]},"_npmUser":{"name":"anubra266","email":"anubra266@gmail.com"},"directories":{},"maintainers":[{"name":"anubra266","email":"anubra266@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stickyreact_0.1.1-0_1619138044689_0.8916780845866195"},"_hasShrinkwrap":false},"1.0.0":{"version":"1.0.0","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=10"},"scripts":{"start":"tsdx watch","build":"tsdx build","test":"tsdx test --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","analyze":"size-limit --why"},"peerDependencies":{"react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"name":"@anubra266/stickyreact","author":{"name":"anubra266"},"module":"dist/stickyreact.esm.js","size-limit":[{"path":"dist/stickyreact.cjs.production.min.js","limit":"10 KB"},{"path":"dist/stickyreact.esm.js","limit":"10 KB"}],"devDependencies":{"@size-limit/preset-small-lib":"^4.10.2","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","husky":"^6.0.0","react":"^17.0.2","react-dom":"^17.0.2","size-limit":"^4.10.2","tsdx":"^0.14.1","tslib":"^2.2.0","typescript":"^4.2.4"},"publishConfig":{"access":"public"},"description":"Create Sticky Elements in React [![NPM](https://img.shields.io/npm/v/@anubra266/stickyreact.svg)](https://www.npmjs.com/package/@anubra266/stickyreact) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://s","licenseText":"MIT License\n\nCopyright (c) 2021 anubra266\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@anubra266/stickyreact@1.0.0","dist":{"shasum":"44d7d5838e6f5878b25ecd3d2625072d7530d18e","integrity":"sha512-+OCGmAa3P789OTS5Cl9HYZRrUKvrUL3HsdN5xNK/ricmd80Qfi8H7/oGWZIpYzRgWwLwdoI8qd5WIvVx5peMSw==","tarball":"https://registry.npmjs.org/@anubra266/stickyreact/-/stickyreact-1.0.0.tgz","fileCount":19,"unpackedSize":103821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggiRVCRA9TVsSAnZWagAArDcP/Rzml2Uep089Otlu9Nv7\nzn6t8wX+fKDjwHSa6upEtj07dNGPO/gpSi3hveO5WsWT+hjE7vN6HQRTc7z9\nEfI2wFOSCP4WBVzRiygY0Pvx89EjEkAH5+6RR1Stpo09eQ8DBhfdrBVAf4jS\nOknoxgDnViHkiQHSdUCS7eV5dh8vwMHR9AdI19XXUjSO/xl8dsoUH1RpqH5Y\ni15POMlafmbNaujo1Nhh4oGozGZPc7zopII4IG8Nc1/1xYpddfjCKALh1ZeC\nHeiW4XG3FLTPs2OiBeija+z1Tyi/zkFkvQWNOHw7k3Q07taz5a5AgiGVCwSR\nQXZX2qK6ksuys8kwmKR1BQWYZyenwbVnUp7UVLuNLU+vHypOwDE0Y+NrQ8fe\n1gVzDHBnfyGglfGT6BEPnvJhb6HShqebg/zO1mtsswEO0MGsaK4n+LS0pVgY\nQu5KFKUZaktAyhr0QuOAbHv/l5QGAqA9FE+fc4Fcf1jebdBkYV/OmjUP4kDQ\nCBDspqReEv5IDrHaBHu7TnxgSHzxjj3OaJBIBRdgjrRBhUMSB4OYk9pA4bAc\ndXrdrBdrJB6DfLkHKD/03HUbbuLgDxNRSgeIB8JAd3TfN1NdEcfyCBCbBsfs\n+ronBIGtp2/RfY2pCTHymX3nx0V2Q8Eaz4vc70qymW20HN4bLSgt/yoLLXmy\nfPW3\r\n=fAmF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDsjqa3YDXHr8OwKwUmxSSelmpJl6KXckg4ZGF29YB7/AiA+Qx5OKpyV0tkh18xjKltKTM4SGxQdmr2g2pvtrWP7bg=="}]},"_npmUser":{"name":"anubra266","email":"anubra266@gmail.com"},"directories":{},"maintainers":[{"name":"anubra266","email":"anubra266@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stickyreact_1.0.0_1619141716973_0.5862510980655709"},"_hasShrinkwrap":false},"1.0.1":{"version":"1.0.1","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=10"},"scripts":{"start":"tsdx watch","build":"tsdx build","test":"tsdx test --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","analyze":"size-limit --why"},"peerDependencies":{"react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"name":"@anubra266/stickyreact","author":{"name":"anubra266"},"module":"dist/stickyreact.esm.js","size-limit":[{"path":"dist/stickyreact.cjs.production.min.js","limit":"10 KB"},{"path":"dist/stickyreact.esm.js","limit":"10 KB"}],"devDependencies":{"@size-limit/preset-small-lib":"^4.10.2","@types/react":"^17.0.3","@types/react-dom":"^17.0.3","husky":"^6.0.0","react":"^17.0.2","react-dom":"^17.0.2","size-limit":"^4.10.2","tsdx":"^0.14.1","tslib":"^2.2.0","typescript":"^4.2.4"},"publishConfig":{"access":"public"},"description":"Create Sticky Elements in React [![NPM](https://img.shields.io/npm/v/@anubra266/stickyreact.svg)](https://www.npmjs.com/package/@anubra266/stickyreact) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://s","licenseText":"MIT License\n\nCopyright (c) 2021 anubra266\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@anubra266/stickyreact@1.0.1","dist":{"shasum":"56118e2cc7c3ab73c07dd312f7bbc7ca220d5a2d","integrity":"sha512-U6XAdYjuP+3uIRCHU2rJsD1vFTV42X88hGlWQOByjbrrx69H0J5FG0eGD0CClrGpr8jpjYVes7l/MlkAJNlvAA==","tarball":"https://registry.npmjs.org/@anubra266/stickyreact/-/stickyreact-1.0.1.tgz","fileCount":19,"unpackedSize":103801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggidoCRA9TVsSAnZWagAA0ZcP/RfojDNMU66/BWC+olMz\nxA82I6+Cc4i03znljvInOkb03K1bFmZdujJLNoh7fhV6jvXA+Kt53mu8u2dY\nxDdEkHMIbvk5QG2IZeVritPHdDQCEjrQXV1ZLhH9c/+m/z0zAnT1B51PXAs6\ndFsNcREw9Mxq3bq2nknSZxMucgFbdC5G2vGU+lcJgYzWlOxF0nLYYEQwjAyJ\nz6Fa6Id+l2B5gZ5JkZ2FAwsnGY5stQczxI982FLmV/FGum0Xgf5MM4Fp3/qt\nM1cPtw43lhvJJW8sLZ0dyCC96GGAFKkdQYu+DhY1fqGtX3Ymnp9PwTcgLtIu\nxKRi6GORm2kJRsy6Jo9bMjX1dgfUebq34eobbHs196kDHzbf6R3Xb+9zQLGY\nF2KfQBDp44K9m/mHw4w3T6V4LV/4kx9oGHJqGyqaw4MNC+Ok72Gd5cW9V5kJ\nplC0cIIIThZA0/DWt2aiadYvelCrG/rnD5A29HvZJpwaUyGAKn5CL/2Qx0SW\nyb4malT3ENLHffTi/JCgIZc51U7XGks7gZei3iqoWMl1ZcTKuQOdSgVJWWKv\nnneHbCZ7hL7ZgYsgDGHso4+jUtV92QyGUvQtBk9EQf4Zz2onwIpy3OEk6iwn\neQ49aEX0QQWuXFZShpOD8im51i5FVdnMX7LuIFa1noGPTbj/qN2sBeXxw+Pe\nh5GK\r\n=Jv6z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE8gpheXsx33i9A+dZJRqSlgxvMpGM5Sp7y0RlTfKPx9AiAnnOo/q05PwHsFlrYNAkE1x464Z6ptVTTriK8yvbeb9g=="}]},"_npmUser":{"name":"anubra266","email":"anubra266@gmail.com"},"directories":{},"maintainers":[{"name":"anubra266","email":"anubra266@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stickyreact_1.0.1_1619142503657_0.4356586498007067"},"_hasShrinkwrap":false}},"time":{"created":"2021-04-23T00:34:04.640Z","0.1.1-0":"2021-04-23T00:34:04.806Z","modified":"2022-04-04T14:25:44.728Z","1.0.0":"2021-04-23T01:35:17.105Z","1.0.1":"2021-04-23T01:48:23.811Z"},"maintainers":[{"name":"anubra266","email":"anubra266@gmail.com"}],"description":"Create Sticky Elements in React [![NPM](https://img.shields.io/npm/v/@anubra266/stickyreact.svg)](https://www.npmjs.com/package/@anubra266/stickyreact) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://s","author":{"name":"anubra266"},"license":"MIT","readme":"# Sticky React\n\nCreate Sticky Elements in React\n[![NPM](https://img.shields.io/npm/v/@anubra266/stickyreact.svg)](https://www.npmjs.com/package/@anubra266/stickyreact) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Install\n\n```bash\nnpm install --save @anubra266/stickyreact\n#OR\nyarn add @anubra266/stickyreact\n```\n\n## Usage\n\n```javascript\nimport Component from 'my-project';\n\nfunction App() {\n  const handleStuck = target => {\n    target?.classList.add('stuck');\n  };\n\n  const handleUnstuck = target => {\n    target?.classList.remove('stuck');\n  };\n\n  const handleChange = ({ target, type }) => {\n    if (type === 'stuck') {\n      target?.classList.add('stuck');\n    } else {\n      target?.classList.remove('stuck');\n    }\n  };\n  return (\n    <StickyViewport as=\"div\">\n      <StickyBoundary\n        onStuck={handleStuck}\n        onUnstuck={handleUnstuck}\n        onChange={handleChange}\n      >\n        <Sticky> I'm Sticky </Sticky>\n        <div> I'm not Sticky </div>\n        <div> I'm not Sticky too </div>\n      </StickyBoundary>\n      <StickyBoundary\n        onStuck={handleStuck}\n        onUnstuck={handleUnstuck}\n        onChange={handleChange}\n      >\n        <Sticky>\n          I'm also Sticky, but I override the above once I'm scrolled to\n        </Sticky>\n        <div> I'm not Sticky </div>\n        <div> I'm not Sticky too </div>\n      </StickyBoundary>\n    </StickyViewport>\n  );\n}\n```\n\n## API Reference\n\n#### StickyViewport\n\nWrapper and Provider for Sticky App\n\n```javascript\n<StickyViewport>...</StickyViewport>\n```\n\n| Parameter | Type                       | Description                   | Required | Deffault |\n| :-------- | :------------------------- | :---------------------------- | -------- | -------- |\n| `as`      | `string` or `ReactElement` | React Element used in display | false    | `div`    |\n\n#### StickyBoundary\n\nContainer that wraps each Sticky Element\n\n```javascript\n<StickyBoundary>...</StickyBoundary>\n```\n\n| Parameter   | Type                       | Description                                     | Required | Deffault |\n| :---------- | :------------------------- | :---------------------------------------------- | -------- | -------- |\n| `as`        | `string` or `ReactElement` | React Element used in display                   | false    | `div`    |\n| `onStuck`   | (target)=>void             | Callback when a child becomes Sticky            | false    | -------- |\n| `onUnstuck` | (target)=>void             | Callback when a child is no longer Sticky       | false    | -------- |\n| `onChange`  | ({target,type})=>void      | Callback when a child changes it's Sticky State | false    | -------- |\n\n#### Sticky\n\nMakes it's content Sticky\n\n```javascript\n<Sticky>...</Sticky>\n```\n\n| Parameter | Type                       | Description                   | Required | Deffault |\n| :-------- | :------------------------- | :---------------------------- | -------- | -------- |\n| `as`      | `string` or `ReactElement` | React Element used in display | false    | `div`    |\n\n#### onStuck\n\nCallback when a child becomes Sticky.\n\n```js\n(target: ReactNode) => {\n  target?.classList.add('stuck');\n};\n```\n\n| Parameter | Type        | Description                 |\n| :-------- | :---------- | :-------------------------- |\n| `target`  | `ReactNode` | The Sticky Element Instance |\n\n#### onUnstuck\n\nCallback when a child is no longer Sticky.\n\n```js\n(target: ReactNode) => {\n  target?.classList.remove('stuck');\n};\n```\n\n| Parameter | Type        | Description                 |\n| :-------- | :---------- | :-------------------------- |\n| `target`  | `ReactNode` | The Sticky Element Instance |\n\n#### onChange\n\nCallback when a child becomes Sticky or Losesthe Sticky State.\n\n**NB:** It provides a destructurable parameter\n\n```js\n({ target, type }: { target: ReactNode, type: 'stuck' | 'unstuck' }) => {\n  if (type === 'stuck') {\n    target?.classList.add('stuck');\n  } else {\n    target?.classList.remove('stuck');\n  }\n};\n```\n\n**NB:** The paramters are to be destructured\n\n| Parameter | Type                  | Description                 |\n| :-------- | :-------------------- | :-------------------------- |\n| `target`  | `ReactNode`           | The Sticky Element Instance |\n| `type`    | `'stuck' | 'unstuck'` | The Sticky Element Instance |\n\n## Used By\n\nThis project is used by the following Projects:\n\n- [Choc UI](https://choc-ui.tech) - Site search bar\n","readmeFilename":"README.md"}