react-anchor-navigation
Version:
React lightweight library for anchor scrolling and navigation tied to URL hash.
7 lines (6 loc) • 3.79 kB
JavaScript
/**
* @license react-anchor-navigation 0.2.7
* MIT License
* License: MIT
*/
var e,t;e=this,t=function(e,t){"use strict";var r="default"in t?t.default:t,n=()=>{},o=t.createContext({offset:0,sections:[],hash:"",registerSection:n,unregisterSection:n,setHash:n});function s(){return(s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function c(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},s=Object.keys(e);for(n=0;n<s.length;n++)r=s[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(n=0;n<s.length;n++)r=s[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var i=["children","className","activeClassName"],a="undefined"!=typeof addEventListener&&(()=>{var e=!1;try{var t=()=>{},r=Object.defineProperty({},"passive",{get:()=>e=!0});addEventListener("testPassive",t,r),removeEventListener("testPassive",t,r)}catch(e){}return e})(),l=(e,t)=>{var r=0,n=e;do{r+=n.offsetTop,n=n.offsetParent}while(n&&n!==t);return r},u=a&&{capture:!1,passive:!0};function f(e,r){t.useEffect(()=>{var t=t=>{var{blockScrollEvent:n,sections:o,scroller:s,offset:c}=e.current;if(!n&&o.length){var i=(s?s.scrollTop:window.pageYOffset||document.documentElement.scrollTop)+c;if(l(o[0],s)>i)t&&r("#",!1);else{var a=o.findIndex(e=>l(e,s)>i),u=-1===a?o[o.length-1]:o[Math.max(a-1,0)];u&&r("#".concat(u.id),!1)}}},n=function(e,t){var r=null;function n(){r||(r=setTimeout(()=>{r=null,e()},t))}return n.cancel=()=>{r&&(clearTimeout(r),r=null)},n}(t,100);return addEventListener("scroll",n,u),t(),()=>{removeEventListener("scroll",n,u),n.cancel()}},[])}var v=["children"];e.AnchorContext=o,e.AnchorLink=function(e){var{children:n,className:a,activeClassName:l}=e,u=c(e,i),{hash:f}=t.useContext(o),v=(a?"".concat(a," "):"")+(f===u.href?l:"");return r.createElement("a",s({},u,{className:v}),n)},e.AnchorProvider=function(e){var{children:n,getScroller:s,offset:c=0}=e,i=t.useRef({offset:c,sections:[],blockScrollEvent:!1,scroller:null});s&&(i.current.scroller=s());var[a,u]=function(e){var[r,n]=t.useState("");return t.useEffect(()=>{var t=t=>{n(location.hash),t&&"hashchange"===t.type&&(e.current.blockScrollEvent=!0,setTimeout(()=>{e.current.blockScrollEvent=!1},100))};return addEventListener("hashchange",t,!1),addEventListener("popstate",t,!1),t(),()=>{removeEventListener("hashchange",t,!1),removeEventListener("popstate",t,!1)}},[]),[r,function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];n(e),"undefined"!=typeof history&&"undefined"!=typeof location&&(t||!("pushState"in history)?location.hash=e:history.pushState(null,e.substr(1),e))}]}(i);return f(i,u),r.createElement(o.Provider,{value:{offset:c,hash:a,sections:i.current.sections,setHash:u,registerSection:e=>{var{sections:t,scroller:r}=i.current;if(!t.includes(e)){var n=l(e,r),o=t.findIndex(e=>l(e,r)>n);-1===o?t.push(e):t.splice(o,0,e)}},unregisterSection:e=>{var t=i.current.sections.indexOf(e);-1!==t&&i.current.sections.splice(t,1)}}},n)},e.AnchorSection=function(e){var{children:n}=e,i=c(e,v),{registerSection:a,unregisterSection:l}=t.useContext(o),u=t.useRef(null);return t.useEffect(()=>(u.current&&(a(u.current),i.id===location.hash.substr(1)&&u.current.scrollIntoView()),()=>{u.current&&l(u.current)}),[]),r.createElement(r.Fragment,null,r.createElement("b",s({},i,{ref:u})),n)},Object.defineProperty(e,"__esModule",{value:!0})},"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).ReactAnchorNavigation={},e.React);