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

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

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