spy-scroll/dist/index.min.js

A lightweight react scroll spy using intersection observer

import e,{useState as r,useEffect as t}from"react";import n from"classnames";import o from"prop-types";function a(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function s(){return(s=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}function i(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,r){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var t=[],n=!0,o=!1,a=void 0;try{for(var s,i=e[Symbol.iterator]();!(n=(s=i.next()).done)&&(t.push(s.value),!r||t.length!==r);n=!0);}catch(e){o=!0,a=e}finally{try{n||null==i.return||i.return()}finally{if(o)throw a}}return t}(e,r)||function(e,r){if(!e)return;if("string"==typeof e)return l(e,r);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return l(e,r)}(e,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function l(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=new Array(r);t<r;t++)n[t]=e[t];return n}function c(o){var l=o.items,c=o.currentClassName,u=o.scrolledPastClassName,f=o.tag,p=o.className,m=o.children,y=o.offset,d=o.style,h=i(r(0),2),g=h[0],b=h[1];if(t((function(){var e=new IntersectionObserver((function(e){if(e[0].intersectionRatio){var r=l.findIndex((function(r){return r===e[0].target.id}));b(r)}}),{root:null,threshold:1,rootMargin:y});return l.forEach((function(r){var t=document.querySelector("#".concat(r));e.observe(t)})),function(){return e.disconnect()}}),[l]),m.length!==l.length&&console.error("SCROLL-SPY: items and childrens length should be same"),m)return e.createElement(f,{className:p,style:d},o.children.map((function(r,t){var o;if(e.isValidElement(r)){var i=r.type,l=t===g,f=t<g,p=n((a(o={},"".concat(r.props.className),r.props.className),a(o,"".concat(c),l),a(o,"".concat(u),f),o));return e.createElement(i,s({key:r.props.id},r.props,{className:p}),r.props.children)}})))}c.propTypes={items:o.arrayOf(o.string).isRequired,currentClassName:o.string.isRequired,scrolledPastClassName:o.string,style:o.object,tag:o.oneOfType([o.string,o.elementType]),offset:o.string},c.defaultProps={items:[],currentClassName:"",scrolledPastClassName:"",style:{},tag:"ul",offset:"-25% 0px -35% 0px"};export default c;