react-with-breakpoints/dist/react-with-breakpoints.es5.js

Utility React component for altering the visual experience of responsive and lean webpages.

import{useState as e,useLayoutEffect as r,useEffect as n,createElement as a,useContext as i,createContext as t}from"react";var o={small:744,medium:1128,large:1440,xlarge:1/0};function l(e,r,n){void 0===e&&(e=[]),void 0===r&&(r=""),void 0===n&&(n=!0);var a=!0;return!n&&(a=!1),e.map(function(e){r===e&&(a=!n)}),a}var u=t({currentBreakpoint:""});function d(e,r){var n=!1;switch(i(u).currentBreakpoint){case"small":n=l(["small","mediumAndBelow","largeAndBelow"],e,r);break;case"medium":n=l(["medium","mediumAndAbove","mediumAndBelow","largeAndBelow"],e,r);break;case"large":n=l(["mediumAndAbove","large","largeAndBelow","largeAndAbove"],e,r);break;case"xlarge":n=l(["mediumAndAbove","largeAndAbove","xlarge"],e,r)}return n}var m=function(i){var t=i.breakpoints,o=i.onBreakpointChange,l=i.children,d=e(""),m=d[0],c=d[1];r(function(){var e,r,n,a=(e=p,r=50,function(){for(var a=[],i=0;i<arguments.length;i++)a[i]=arguments[i];clearTimeout(n),n=setTimeout(function(){n=null,e.apply(void 0,a)},r)});return window.addEventListener("resize",a,{passive:!0}),p(),function(){window.removeEventListener("resize",a)}},[]),n(function(){o&&o(m)},[m]);var p=function(){var e=window.innerWidth;e<t.small?c("small"):e<t.medium?c("medium"):e<t.large?c("large"):(e<=t.xlarge||e>t.xlarge)&&c("xlarge")};return a(u.Provider,{value:{currentBreakpoint:m}},l)};m.defaultProps={breakpoints:o},m.displayName="BreakpointsProvider";var c=function(){return(c=Object.assign||function(e){for(var r,n=1,a=arguments.length;n<a;n++)for(var i in r=arguments[n])Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i]);return e}).apply(this,arguments)},p=function(e){var r=function(r){return a(u.Consumer,null,function(n){return a(e,c({},r,{currentBreakpoint:n.currentBreakpoint}))})};return r.displayName="withBreakpoints("+(e.displayName||e.name||"Component")+")",r},s=function(e){var r=e.breakpoint,n=e.children;return d(r)?n:null};s.displayName="HideAt",s.defaultProps={breakpoint:"",children:null};var v=function(e){var r=e.breakpoint,n=e.children;return d(r,!1)?n:null};v.displayName="ShowAt",v.defaultProps={breakpoint:"",children:null};export{m as BreakpointsProvider,p as withBreakpoints,s as HideAt,v as ShowAt,u as BreakpointContext};
//# sourceMappingURL=react-with-breakpoints.es5.js.map