react-when-ready/dist/index.js

React tools for content readiness orchestration. Provides context providers, hooks and components to coordinate smooth transitions when async content becomes available

"use strict";var e=require("react"),n=function(){},t={register:n,unregister:n,markReady:n},r=e.createContext(t),u=function(){var n=e.useId(),t=e.useContext(r),u=t.markReady,i=t.register,o=t.unregister;return e.useLayoutEffect((function(){return i(n),function(){return o(n)}}),[]),e.useCallback((function(){return u(n)}),[n,u])},i=function(n){var t=n.children,i=n.onReady,o=u(),c=e.useRef(new Set),a=e.useRef(!1),s=e.useRef(!1),d=e.useCallback((function(){a.current=!0,o(),null==i||i()}),[o,i]),f=e.useMemo((function(){return{register:function(e){a.current||c.current.add(e)},unregister:function(e){a.current||(c.current.delete(e),s.current&&0===c.current.size&&d())},markReady:function(e){a.current||(s.current=!0,c.current.delete(e),0===c.current.size&&d())}}}),[d]);return e.createElement(r.Provider,{value:f},t)},o=function(n,t){var r=e.useState(null),u=r[0],i=r[1];return e.useLayoutEffect((function(){if(t>0){var e=setTimeout((function(){i(n)}),t);return function(){clearTimeout(e)}}i(n)}),[t,n]),u},c=function(e,n){var t;return null!==(t=o(e,e?n:0))&&void 0!==t&&t};exports.ReadinessPendingProvider=i,exports.SwitchWhenReady=function(n){var t=n.activeKey,r=n.renderByKey,u=n.loaderDelay,o=void 0===u?0:u,a=n.renderWithLoading,s=void 0===a?function(e){return e.content}:a,d=n.getContentWrapperStyle,f=void 0===d?function(e){return{display:e?"none":"contents"}}:d,l=e.useState(),v=l[0],y=l[1],R=t===v?void 0:v,m=e.useCallback((function(){return y(t)}),[t]),g=void 0!==R,p=void 0!==t,E=g||void 0===v,k=c(E,o);return s({content:e.createElement(e.Fragment,null,p&&e.createElement(i,{key:t,onReady:m},e.createElement("div",{style:f(E)},r(t))),g&&e.createElement(i,{key:R},e.createElement("div",{style:f(!1)},r(R)))),isShowLoading:k})},exports.useDelayedLoading=c,exports.useDelayedValue=o,exports.useReadinessOnCondition=function(n){!function(n,t,r){void 0===r&&(r=!0);var u=e.useRef(!1);e.useLayoutEffect((function(){n&&(r&&u.current||(u.current=!0,t()))}))}(n,u())},exports.useReadinessReporter=u;
//# sourceMappingURL=index.js.map