theming - npm Package Compare versions

Comparing version 3.0.3 to 3.1.0

CHANGELOG.md

@@ -6,2 +6,8 @@ # Changelog
 
+### Next
+
+- Improve bundle size ([#83](https://github.com/cssinjs/theming/pull/83))
+- Add useTheme hook ([#84](https://github.com/cssinjs/theming/pull/84))
+- Upgrade hoist-non-react-statics to 3.3.0 ([#86](https://github.com/cssinjs/theming/pull/86))
+
 ### 3.0.3 (2019-1-20)
@@ -8,0 +14,0 @@

dist/theming.cjs.js

@@ -66,5 +66,3 @@ 'use strict';
 function createThemeProvider(context) {
-  var _class, _temp;
-
-  return _temp = _class =
+  var ThemeProvider =
   /*#__PURE__*/
@@ -132,8 +130,13 @@ function (_React$Component) {
     return ThemeProvider;
-  }(React__default.Component), _defineProperty(_class, "propTypes", {
-    children: PropTypes.node,
-    theme: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.func]).isRequired
-  }), _defineProperty(_class, "defaultProps", {
-    children: null
-  }), _temp;
+  }(React__default.Component);
+
+  if (process.env.NODE_ENV !== 'production') {
+    ThemeProvider.propTypes = {
+      // eslint-disable-next-line react/require-default-props
+      children: PropTypes.node,
+      theme: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.func]).isRequired
+    };
+  }
+
+  return ThemeProvider;
 }
@@ -153,3 +156,7 @@
     });
-    withTheme.displayName = "WithTheme(" + getDisplayName(Component) + ")";
+
+    if (process.env.NODE_ENV !== 'production') {
+      withTheme.displayName = "WithTheme(" + getDisplayName(Component) + ")";
+    }
+
     hoist(withTheme, Component);
@@ -160,2 +167,12 @@ return withTheme;
 
+function createUseTheme(context) {
+  var useTheme = function useTheme() {
+    var theme = React__default.useContext(context);
+    process.env.NODE_ENV !== "production" ? warning(isObject(theme), '[theming] Please use useTheme only with the ThemeProvider') : void 0;
+    return theme;
+  };
+
+  return useTheme;
+}
+
 var ThemeContext = React.createContext();
@@ -167,2 +184,3 @@
     withTheme: createWithTheme(context),
+    useTheme: createUseTheme(context),
     ThemeProvider: createThemeProvider(context)
@@ -174,4 +192,6 @@ };
     withTheme = _createTheming.withTheme,
-    ThemeProvider = _createTheming.ThemeProvider;
+    ThemeProvider = _createTheming.ThemeProvider,
+    useTheme = _createTheming.useTheme;
 
+exports.useTheme = useTheme;
 exports.ThemeContext = ThemeContext;
@@ -178,0 +198,0 @@ exports.withTheme = withTheme;

dist/theming.esm.js

@@ -59,5 +59,3 @@ import React, { createContext } from 'react';
 function createThemeProvider(context) {
-  var _class, _temp;
-
-  return _temp = _class =
+  var ThemeProvider =
   /*#__PURE__*/
@@ -125,8 +123,13 @@ function (_React$Component) {
     return ThemeProvider;
-  }(React.Component), _defineProperty(_class, "propTypes", {
-    children: PropTypes.node,
-    theme: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.func]).isRequired
-  }), _defineProperty(_class, "defaultProps", {
-    children: null
-  }), _temp;
+  }(React.Component);
+
+  if (process.env.NODE_ENV !== 'production') {
+    ThemeProvider.propTypes = {
+      // eslint-disable-next-line react/require-default-props
+      children: PropTypes.node,
+      theme: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.func]).isRequired
+    };
+  }
+
+  return ThemeProvider;
 }
@@ -146,3 +149,7 @@
     });
-    withTheme.displayName = "WithTheme(" + getDisplayName(Component) + ")";
+
+    if (process.env.NODE_ENV !== 'production') {
+      withTheme.displayName = "WithTheme(" + getDisplayName(Component) + ")";
+    }
+
     hoist(withTheme, Component);
@@ -153,2 +160,12 @@ return withTheme;
 
+function createUseTheme(context) {
+  var useTheme = function useTheme() {
+    var theme = React.useContext(context);
+    process.env.NODE_ENV !== "production" ? warning(isObject(theme), '[theming] Please use useTheme only with the ThemeProvider') : void 0;
+    return theme;
+  };
+
+  return useTheme;
+}
+
 var ThemeContext = createContext();
@@ -160,2 +177,3 @@
     withTheme: createWithTheme(context),
+    useTheme: createUseTheme(context),
     ThemeProvider: createThemeProvider(context)
@@ -167,4 +185,5 @@ };
     withTheme = _createTheming.withTheme,
-    ThemeProvider = _createTheming.ThemeProvider;
+    ThemeProvider = _createTheming.ThemeProvider,
+    useTheme = _createTheming.useTheme;
 
-export { ThemeContext, withTheme, createTheming, ThemeProvider };
+export { useTheme, ThemeContext, withTheme, createTheming, ThemeProvider };

dist/theming.js

@@ -839,5 +839,3 @@ (function (global, factory) {
   function createThemeProvider(context) {
-    var _class, _temp;
-
-    return _temp = _class =
+    var ThemeProvider =
     /*#__PURE__*/
@@ -905,8 +903,13 @@ function (_React$Component) {
       return ThemeProvider;
-    }(React__default.Component), _defineProperty(_class, "propTypes", {
-      children: propTypes.node,
-      theme: propTypes.oneOfType([propTypes.shape({}), propTypes.func]).isRequired
-    }), _defineProperty(_class, "defaultProps", {
-      children: null
-    }), _temp;
+    }(React__default.Component);
+
+    {
+      ThemeProvider.propTypes = {
+        // eslint-disable-next-line react/require-default-props
+        children: propTypes.node,
+        theme: propTypes.oneOfType([propTypes.shape({}), propTypes.func]).isRequired
+      };
+    }
+
+    return ThemeProvider;
   }
@@ -916,6 +919,7 @@
   Object.defineProperty(exports,"__esModule",{value:!0});
-  var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.concurrent_mode"):60111,m=b?Symbol.for("react.forward_ref"):60112,n=b?Symbol.for("react.suspense"):60113,q=b?Symbol.for("react.memo"):60115,r=b?Symbol.for("react.lazy"):
-  60116;function t(a){if("object"===typeof a&&null!==a){var p=a.$$typeof;switch(p){case c:switch(a=a.type,a){case l:case e:case g:case f:return a;default:switch(a=a&&a.$$typeof,a){case k:case m:case h:return a;default:return p}}case d:return p}}}function u(a){return t(a)===l}exports.typeOf=t;exports.AsyncMode=l;exports.ConcurrentMode=l;exports.ContextConsumer=k;exports.ContextProvider=h;exports.Element=c;exports.ForwardRef=m;exports.Fragment=e;exports.Profiler=g;exports.Portal=d;
-  exports.StrictMode=f;exports.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===l||a===g||a===f||a===n||"object"===typeof a&&null!==a&&(a.$$typeof===r||a.$$typeof===q||a.$$typeof===h||a.$$typeof===k||a.$$typeof===m)};exports.isAsyncMode=function(a){return u(a)};exports.isConcurrentMode=u;exports.isContextConsumer=function(a){return t(a)===k};exports.isContextProvider=function(a){return t(a)===h};
-  exports.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};exports.isForwardRef=function(a){return t(a)===m};exports.isFragment=function(a){return t(a)===e};exports.isProfiler=function(a){return t(a)===g};exports.isPortal=function(a){return t(a)===d};exports.isStrictMode=function(a){return t(a)===f};
+  var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?Symbol.for("react.memo"):
+  60115,r=b?Symbol.for("react.lazy"):60116;function t(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case h:return a;default:return u}}case r:case q:case d:return u}}}function v(a){return t(a)===m}exports.typeOf=t;exports.AsyncMode=l;exports.ConcurrentMode=m;exports.ContextConsumer=k;exports.ContextProvider=h;exports.Element=c;exports.ForwardRef=n;
+  exports.Fragment=e;exports.Lazy=r;exports.Memo=q;exports.Portal=d;exports.Profiler=g;exports.StrictMode=f;exports.Suspense=p;exports.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||"object"===typeof a&&null!==a&&(a.$$typeof===r||a.$$typeof===q||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n)};exports.isAsyncMode=function(a){return v(a)||t(a)===l};exports.isConcurrentMode=v;exports.isContextConsumer=function(a){return t(a)===k};
+  exports.isContextProvider=function(a){return t(a)===h};exports.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};exports.isForwardRef=function(a){return t(a)===n};exports.isFragment=function(a){return t(a)===e};exports.isLazy=function(a){return t(a)===r};exports.isMemo=function(a){return t(a)===q};exports.isPortal=function(a){return t(a)===d};exports.isProfiler=function(a){return t(a)===g};exports.isStrictMode=function(a){return t(a)===f};
+  exports.isSuspense=function(a){return t(a)===p};
   });
@@ -932,16 +936,22 @@
   var reactIs_production_min_8 = reactIs_production_min.Fragment;
-  var reactIs_production_min_9 = reactIs_production_min.Profiler;
-  var reactIs_production_min_10 = reactIs_production_min.Portal;
-  var reactIs_production_min_11 = reactIs_production_min.StrictMode;
-  var reactIs_production_min_12 = reactIs_production_min.isValidElementType;
-  var reactIs_production_min_13 = reactIs_production_min.isAsyncMode;
-  var reactIs_production_min_14 = reactIs_production_min.isConcurrentMode;
-  var reactIs_production_min_15 = reactIs_production_min.isContextConsumer;
-  var reactIs_production_min_16 = reactIs_production_min.isContextProvider;
-  var reactIs_production_min_17 = reactIs_production_min.isElement;
-  var reactIs_production_min_18 = reactIs_production_min.isForwardRef;
-  var reactIs_production_min_19 = reactIs_production_min.isFragment;
-  var reactIs_production_min_20 = reactIs_production_min.isProfiler;
-  var reactIs_production_min_21 = reactIs_production_min.isPortal;
-  var reactIs_production_min_22 = reactIs_production_min.isStrictMode;
+  var reactIs_production_min_9 = reactIs_production_min.Lazy;
+  var reactIs_production_min_10 = reactIs_production_min.Memo;
+  var reactIs_production_min_11 = reactIs_production_min.Portal;
+  var reactIs_production_min_12 = reactIs_production_min.Profiler;
+  var reactIs_production_min_13 = reactIs_production_min.StrictMode;
+  var reactIs_production_min_14 = reactIs_production_min.Suspense;
+  var reactIs_production_min_15 = reactIs_production_min.isValidElementType;
+  var reactIs_production_min_16 = reactIs_production_min.isAsyncMode;
+  var reactIs_production_min_17 = reactIs_production_min.isConcurrentMode;
+  var reactIs_production_min_18 = reactIs_production_min.isContextConsumer;
+  var reactIs_production_min_19 = reactIs_production_min.isContextProvider;
+  var reactIs_production_min_20 = reactIs_production_min.isElement;
+  var reactIs_production_min_21 = reactIs_production_min.isForwardRef;
+  var reactIs_production_min_22 = reactIs_production_min.isFragment;
+  var reactIs_production_min_23 = reactIs_production_min.isLazy;
+  var reactIs_production_min_24 = reactIs_production_min.isMemo;
+  var reactIs_production_min_25 = reactIs_production_min.isPortal;
+  var reactIs_production_min_26 = reactIs_production_min.isProfiler;
+  var reactIs_production_min_27 = reactIs_production_min.isStrictMode;
+  var reactIs_production_min_28 = reactIs_production_min.isSuspense;
 
@@ -968,2 +978,3 @@ var reactIs_development = createCommonjsModule(function (module, exports) {
   var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace;
+  var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
   var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
@@ -1037,3 +1048,2 @@ var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
       var $$typeof = object.$$typeof;
-
       switch ($$typeof) {
@@ -1044,2 +1054,3 @@ case REACT_ELEMENT_TYPE:
           switch (type) {
+            case REACT_ASYNC_MODE_TYPE:
             case REACT_CONCURRENT_MODE_TYPE:
@@ -1049,2 +1060,3 @@ case REACT_FRAGMENT_TYPE:
             case REACT_STRICT_MODE_TYPE:
+            case REACT_SUSPENSE_TYPE:
               return type;
@@ -1063,2 +1075,4 @@ default:
           }
+        case REACT_LAZY_TYPE:
+        case REACT_MEMO_TYPE:
         case REACT_PORTAL_TYPE:
@@ -1072,4 +1086,4 @@ return $$typeof;
 
-  // AsyncMode alias is deprecated along with isAsyncMode
-  var AsyncMode = REACT_CONCURRENT_MODE_TYPE;
+  // AsyncMode is deprecated along with isAsyncMode
+  var AsyncMode = REACT_ASYNC_MODE_TYPE;
   var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
@@ -1081,5 +1095,8 @@ var ContextConsumer = REACT_CONTEXT_TYPE;
   var Fragment = REACT_FRAGMENT_TYPE;
+  var Lazy = REACT_LAZY_TYPE;
+  var Memo = REACT_MEMO_TYPE;
+  var Portal = REACT_PORTAL_TYPE;
   var Profiler = REACT_PROFILER_TYPE;
-  var Portal = REACT_PORTAL_TYPE;
   var StrictMode = REACT_STRICT_MODE_TYPE;
+  var Suspense = REACT_SUSPENSE_TYPE;
 
@@ -1096,3 +1113,3 @@ var hasWarnedAboutDeprecatedIsAsyncMode = false;
     }
-    return isConcurrentMode(object);
+    return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
   }
@@ -1117,11 +1134,20 @@ function isConcurrentMode(object) {
   }
-  function isProfiler(object) {
-    return typeOf(object) === REACT_PROFILER_TYPE;
+  function isLazy(object) {
+    return typeOf(object) === REACT_LAZY_TYPE;
   }
+  function isMemo(object) {
+    return typeOf(object) === REACT_MEMO_TYPE;
+  }
   function isPortal(object) {
     return typeOf(object) === REACT_PORTAL_TYPE;
   }
+  function isProfiler(object) {
+    return typeOf(object) === REACT_PROFILER_TYPE;
+  }
   function isStrictMode(object) {
     return typeOf(object) === REACT_STRICT_MODE_TYPE;
   }
+  function isSuspense(object) {
+    return typeOf(object) === REACT_SUSPENSE_TYPE;
+  }
 
@@ -1136,5 +1162,8 @@ exports.typeOf = typeOf;
   exports.Fragment = Fragment;
+  exports.Lazy = Lazy;
+  exports.Memo = Memo;
+  exports.Portal = Portal;
   exports.Profiler = Profiler;
-  exports.Portal = Portal;
   exports.StrictMode = StrictMode;
+  exports.Suspense = Suspense;
   exports.isValidElementType = isValidElementType;
@@ -1148,5 +1177,8 @@ exports.isAsyncMode = isAsyncMode;
   exports.isFragment = isFragment;
+  exports.isLazy = isLazy;
+  exports.isMemo = isMemo;
+  exports.isPortal = isPortal;
   exports.isProfiler = isProfiler;
-  exports.isPortal = isPortal;
   exports.isStrictMode = isStrictMode;
+  exports.isSuspense = isSuspense;
     })();
@@ -1165,16 +1197,22 @@ }
   var reactIs_development_8 = reactIs_development.Fragment;
-  var reactIs_development_9 = reactIs_development.Profiler;
-  var reactIs_development_10 = reactIs_development.Portal;
-  var reactIs_development_11 = reactIs_development.StrictMode;
-  var reactIs_development_12 = reactIs_development.isValidElementType;
-  var reactIs_development_13 = reactIs_development.isAsyncMode;
-  var reactIs_development_14 = reactIs_development.isConcurrentMode;
-  var reactIs_development_15 = reactIs_development.isContextConsumer;
-  var reactIs_development_16 = reactIs_development.isContextProvider;
-  var reactIs_development_17 = reactIs_development.isElement;
-  var reactIs_development_18 = reactIs_development.isForwardRef;
-  var reactIs_development_19 = reactIs_development.isFragment;
-  var reactIs_development_20 = reactIs_development.isProfiler;
-  var reactIs_development_21 = reactIs_development.isPortal;
-  var reactIs_development_22 = reactIs_development.isStrictMode;
+  var reactIs_development_9 = reactIs_development.Lazy;
+  var reactIs_development_10 = reactIs_development.Memo;
+  var reactIs_development_11 = reactIs_development.Portal;
+  var reactIs_development_12 = reactIs_development.Profiler;
+  var reactIs_development_13 = reactIs_development.StrictMode;
+  var reactIs_development_14 = reactIs_development.Suspense;
+  var reactIs_development_15 = reactIs_development.isValidElementType;
+  var reactIs_development_16 = reactIs_development.isAsyncMode;
+  var reactIs_development_17 = reactIs_development.isConcurrentMode;
+  var reactIs_development_18 = reactIs_development.isContextConsumer;
+  var reactIs_development_19 = reactIs_development.isContextProvider;
+  var reactIs_development_20 = reactIs_development.isElement;
+  var reactIs_development_21 = reactIs_development.isForwardRef;
+  var reactIs_development_22 = reactIs_development.isFragment;
+  var reactIs_development_23 = reactIs_development.isLazy;
+  var reactIs_development_24 = reactIs_development.isMemo;
+  var reactIs_development_25 = reactIs_development.isPortal;
+  var reactIs_development_26 = reactIs_development.isProfiler;
+  var reactIs_development_27 = reactIs_development.isStrictMode;
+  var reactIs_development_28 = reactIs_development.isSuspense;
 
@@ -1193,3 +1231,2 @@ var reactIs = createCommonjsModule(function (module) {
 
-
   var REACT_STATICS = {
@@ -1202,2 +1239,3 @@ childContextTypes: true,
       getDefaultProps: true,
+      getDerivedStateFromError: true,
       getDerivedStateFromProps: true,
@@ -1221,8 +1259,27 @@ mixins: true,
       '$$typeof': true,
-      render: true
+      render: true,
+      defaultProps: true,
+      displayName: true,
+      propTypes: true
   };
 
+  var MEMO_STATICS = {
+      '$$typeof': true,
+      compare: true,
+      defaultProps: true,
+      displayName: true,
+      propTypes: true,
+      type: true
+  };
+
   var TYPE_STATICS = {};
   TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
 
+  function getStatics(component) {
+      if (reactIs.isMemo(component)) {
+          return MEMO_STATICS;
+      }
+      return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;
+  }
+
   var defineProperty = Object.defineProperty;
@@ -1252,4 +1309,4 @@ var getOwnPropertyNames = Object.getOwnPropertyNames;
 
-          var targetStatics = TYPE_STATICS[targetComponent['$$typeof']] || REACT_STATICS;
-          var sourceStatics = TYPE_STATICS[sourceComponent['$$typeof']] || REACT_STATICS;
+          var targetStatics = getStatics(targetComponent);
+          var sourceStatics = getStatics(sourceComponent);
 
@@ -1300,3 +1357,7 @@ for (var i = 0; i < keys.length; ++i) {
       });
-      withTheme.displayName = "WithTheme(" + getDisplayName(Component) + ")";
+
+      {
+        withTheme.displayName = "WithTheme(" + getDisplayName(Component) + ")";
+      }
+
       hoistNonReactStatics_cjs(withTheme, Component);
@@ -1307,2 +1368,12 @@ return withTheme;
 
+  function createUseTheme(context) {
+    var useTheme = function useTheme() {
+      var theme = React__default.useContext(context);
+      warning(isObject(theme), '[theming] Please use useTheme only with the ThemeProvider');
+      return theme;
+    };
+
+    return useTheme;
+  }
+
   var ThemeContext = React.createContext();
@@ -1314,2 +1385,3 @@
       withTheme: createWithTheme(context),
+      useTheme: createUseTheme(context),
       ThemeProvider: createThemeProvider(context)
@@ -1321,4 +1393,6 @@ };
       withTheme = _createTheming.withTheme,
-      ThemeProvider = _createTheming.ThemeProvider;
+      ThemeProvider = _createTheming.ThemeProvider,
+      useTheme = _createTheming.useTheme;
 
+  exports.useTheme = useTheme;
   exports.ThemeContext = ThemeContext;
@@ -1325,0 +1399,0 @@ exports.withTheme = withTheme;

dist/theming.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t(e.theming={},e.react)}(this,function(e,t){"use strict";var c="default"in t?t.default:t;function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function s(){return(s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}function f(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function r(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function o(e,t){return e(t={exports:{}},t.exports),t.exports}var n=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,u=Object.prototype.propertyIsEnumerable;(function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},r=0;r<10;r++)t["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var o={};return"abcdefghijklmnopqrst".split("").forEach(function(e){o[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},o)).join("")}catch(e){return!1}})()&&Object.assign;function p(){}var l=o(function(e){e.exports=function(){function e(e,t,r,o,n,i){if("SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"!==i){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}}function t(){return e}var r={array:e.isRequired=e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return r.checkPropTypes=p,r.PropTypes=r}()});function y(i){var e,t;return t=e=function(n){var e,t;function r(){for(var r,e=arguments.length,t=new Array(e),o=0;o<e;o++)t[o]=arguments[o];return a(f(f(r=n.call.apply(n,[this].concat(t))||this)),"cachedTheme",void 0),a(f(f(r)),"lastOuterTheme",void 0),a(f(f(r)),"lastTheme",void 0),a(f(f(r)),"renderProvider",function(e){var t=r.props.children;return c.createElement(i.Provider,{value:r.getTheme(e)},t)}),r}t=n,(e=r).prototype=Object.create(t.prototype),(e.prototype.constructor=e).__proto__=t;var o=r.prototype;return o.getTheme=function(e){var t=this.props.theme;return t===this.lastTheme&&e===this.lastOuterTheme&&this.cachedTheme||(this.lastOuterTheme=e,this.lastTheme=t,this.cachedTheme="function"==typeof t?t(e):e?s({},e,t):t),this.cachedTheme},o.render=function(){return this.props.children?c.createElement(i.Consumer,null,this.renderProvider):null},r}(c.Component),a(e,"propTypes",{children:l.node,theme:l.oneOfType([l.shape({}),l.func]).isRequired}),a(e,"defaultProps",{children:null}),t}var d=o(function(e,t){Object.defineProperty(t,"__esModule",{value:!0});var r="function"==typeof Symbol&&Symbol.for,o=r?Symbol.for("react.element"):60103,n=r?Symbol.for("react.portal"):60106,i=r?Symbol.for("react.fragment"):60107,c=r?Symbol.for("react.strict_mode"):60108,a=r?Symbol.for("react.profiler"):60114,s=r?Symbol.for("react.provider"):60109,f=r?Symbol.for("react.context"):60110,u=r?Symbol.for("react.concurrent_mode"):60111,p=r?Symbol.for("react.forward_ref"):60112,l=r?Symbol.for("react.suspense"):60113,y=r?Symbol.for("react.memo"):60115,d=r?Symbol.for("react.lazy"):60116;function m(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case o:switch(e=e.type){case u:case i:case a:case c:return e;default:switch(e=e&&e.$$typeof){case f:case p:case s:return e;default:return t}}case n:return t}}}function h(e){return m(e)===u}t.typeOf=m,t.AsyncMode=u,t.ConcurrentMode=u,t.ContextConsumer=f,t.ContextProvider=s,t.Element=o,t.ForwardRef=p,t.Fragment=i,t.Profiler=a,t.Portal=n,t.StrictMode=c,t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===i||e===u||e===a||e===c||e===l||"object"==typeof e&&null!==e&&(e.$$typeof===d||e.$$typeof===y||e.$$typeof===s||e.$$typeof===f||e.$$typeof===p)},t.isAsyncMode=function(e){return h(e)},t.isConcurrentMode=h,t.isContextConsumer=function(e){return m(e)===f},t.isContextProvider=function(e){return m(e)===s},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===o},t.isForwardRef=function(e){return m(e)===p},t.isFragment=function(e){return m(e)===i},t.isProfiler=function(e){return m(e)===a},t.isPortal=function(e){return m(e)===n},t.isStrictMode=function(e){return m(e)===c}});r(d);d.typeOf,d.AsyncMode,d.ConcurrentMode,d.ContextConsumer,d.ContextProvider,d.Element,d.ForwardRef,d.Fragment,d.Profiler,d.Portal,d.StrictMode,d.isValidElementType,d.isAsyncMode,d.isConcurrentMode,d.isContextConsumer,d.isContextProvider,d.isElement,d.isForwardRef,d.isFragment,d.isProfiler,d.isPortal,d.isStrictMode;var m=o(function(e,t){});r(m);m.typeOf,m.AsyncMode,m.ConcurrentMode,m.ContextConsumer,m.ContextProvider,m.Element,m.ForwardRef,m.Fragment,m.Profiler,m.Portal,m.StrictMode,m.isValidElementType,m.isAsyncMode,m.isConcurrentMode,m.isContextConsumer,m.isContextProvider,m.isElement,m.isForwardRef,m.isFragment,m.isProfiler,m.isPortal,m.isStrictMode;var h=o(function(e){e.exports=d}),b={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},v={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},O={};O[h.ForwardRef]={$$typeof:!0,render:!0};var P=Object.defineProperty,g=Object.getOwnPropertyNames,T=Object.getOwnPropertySymbols,C=Object.getOwnPropertyDescriptor,j=Object.getPrototypeOf,w=Object.prototype;var x=function e(t,r,o){if("string"==typeof r)return t;if(w){var n=j(r);n&&n!==w&&e(t,n,o)}var i=g(r);T&&(i=i.concat(T(r)));for(var c=O[t.$$typeof]||b,a=O[r.$$typeof]||b,s=0;s<i.length;++s){var f=i[s];if(!(v[f]||o&&o[f]||a&&a[f]||c&&c[f])){var u=C(r,f);try{P(t,f,u)}catch(e){}}}return t},S=r(o(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return e.displayName||e.name||("string"==typeof e&&0<e.length?e:"Unknown")}}));var _=t.createContext();function M(e){return{context:e,withTheme:(n=e,function(o){var e=c.forwardRef(function(t,r){return c.createElement(n.Consumer,null,function(e){return c.createElement(o,s({theme:e,ref:r},t))})});return e.displayName="WithTheme("+S(o)+")",x(e,o),e}),ThemeProvider:y(e)};var n}var $=M(_),E=$.withTheme,F=$.ThemeProvider;e.ThemeContext=_,e.withTheme=E,e.createTheming=M,e.ThemeProvider=F,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t(e.theming={},e.react)}(this,function(e,t){"use strict";var a="default"in t?t.default:t;function c(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function s(){return(s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}function u(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function r(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function o(e,t){return e(t={exports:{}},t.exports),t.exports}var n=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable;(function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},r=0;r<10;r++)t["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var o={};return"abcdefghijklmnopqrst".split("").forEach(function(e){o[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},o)).join("")}catch(e){return!1}})()&&Object.assign;function p(){}o(function(e){e.exports=function(){function e(e,t,r,o,n,i){if("SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"!==i){var a=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw a.name="Invariant Violation",a}}function t(){return e}var r={array:e.isRequired=e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return r.checkPropTypes=p,r.PropTypes=r}()});function l(i){return function(n){var e,t;function r(){for(var r,e=arguments.length,t=new Array(e),o=0;o<e;o++)t[o]=arguments[o];return c(u(u(r=n.call.apply(n,[this].concat(t))||this)),"cachedTheme",void 0),c(u(u(r)),"lastOuterTheme",void 0),c(u(u(r)),"lastTheme",void 0),c(u(u(r)),"renderProvider",function(e){var t=r.props.children;return a.createElement(i.Provider,{value:r.getTheme(e)},t)}),r}t=n,(e=r).prototype=Object.create(t.prototype),(e.prototype.constructor=e).__proto__=t;var o=r.prototype;return o.getTheme=function(e){var t=this.props.theme;return t===this.lastTheme&&e===this.lastOuterTheme&&this.cachedTheme||(this.lastOuterTheme=e,this.lastTheme=t,this.cachedTheme="function"==typeof t?t(e):e?s({},e,t):t),this.cachedTheme},o.render=function(){return this.props.children?a.createElement(i.Consumer,null,this.renderProvider):null},r}(a.Component)}var y=o(function(e,t){Object.defineProperty(t,"__esModule",{value:!0});var r="function"==typeof Symbol&&Symbol.for,o=r?Symbol.for("react.element"):60103,n=r?Symbol.for("react.portal"):60106,i=r?Symbol.for("react.fragment"):60107,a=r?Symbol.for("react.strict_mode"):60108,c=r?Symbol.for("react.profiler"):60114,s=r?Symbol.for("react.provider"):60109,u=r?Symbol.for("react.context"):60110,f=r?Symbol.for("react.async_mode"):60111,p=r?Symbol.for("react.concurrent_mode"):60111,l=r?Symbol.for("react.forward_ref"):60112,y=r?Symbol.for("react.suspense"):60113,m=r?Symbol.for("react.memo"):60115,d=r?Symbol.for("react.lazy"):60116;function h(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case o:switch(e=e.type){case f:case p:case i:case c:case a:case y:return e;default:switch(e=e&&e.$$typeof){case u:case l:case s:return e;default:return t}}case d:case m:case n:return t}}}function b(e){return h(e)===p}t.typeOf=h,t.AsyncMode=f,t.ConcurrentMode=p,t.ContextConsumer=u,t.ContextProvider=s,t.Element=o,t.ForwardRef=l,t.Fragment=i,t.Lazy=d,t.Memo=m,t.Portal=n,t.Profiler=c,t.StrictMode=a,t.Suspense=y,t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===i||e===p||e===c||e===a||e===y||"object"==typeof e&&null!==e&&(e.$$typeof===d||e.$$typeof===m||e.$$typeof===s||e.$$typeof===u||e.$$typeof===l)},t.isAsyncMode=function(e){return b(e)||h(e)===f},t.isConcurrentMode=b,t.isContextConsumer=function(e){return h(e)===u},t.isContextProvider=function(e){return h(e)===s},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===o},t.isForwardRef=function(e){return h(e)===l},t.isFragment=function(e){return h(e)===i},t.isLazy=function(e){return h(e)===d},t.isMemo=function(e){return h(e)===m},t.isPortal=function(e){return h(e)===n},t.isProfiler=function(e){return h(e)===c},t.isStrictMode=function(e){return h(e)===a},t.isSuspense=function(e){return h(e)===y}});r(y);y.typeOf,y.AsyncMode,y.ConcurrentMode,y.ContextConsumer,y.ContextProvider,y.Element,y.ForwardRef,y.Fragment,y.Lazy,y.Memo,y.Portal,y.Profiler,y.StrictMode,y.Suspense,y.isValidElementType,y.isAsyncMode,y.isConcurrentMode,y.isContextConsumer,y.isContextProvider,y.isElement,y.isForwardRef,y.isFragment,y.isLazy,y.isMemo,y.isPortal,y.isProfiler,y.isStrictMode,y.isSuspense;var m=o(function(e,t){});r(m);m.typeOf,m.AsyncMode,m.ConcurrentMode,m.ContextConsumer,m.ContextProvider,m.Element,m.ForwardRef,m.Fragment,m.Lazy,m.Memo,m.Portal,m.Profiler,m.StrictMode,m.Suspense,m.isValidElementType,m.isAsyncMode,m.isConcurrentMode,m.isContextConsumer,m.isContextProvider,m.isElement,m.isForwardRef,m.isFragment,m.isLazy,m.isMemo,m.isPortal,m.isProfiler,m.isStrictMode,m.isSuspense;var d=o(function(e){e.exports=y}),h={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},b={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},v={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},P={};function O(e){return d.isMemo(e)?v:P[e.$$typeof]||h}P[d.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0};var g=Object.defineProperty,T=Object.getOwnPropertyNames,S=Object.getOwnPropertySymbols,C=Object.getOwnPropertyDescriptor,j=Object.getPrototypeOf,w=Object.prototype;var x=function e(t,r,o){if("string"==typeof r)return t;if(w){var n=j(r);n&&n!==w&&e(t,n,o)}var i=T(r);S&&(i=i.concat(S(r)));for(var a=O(t),c=O(r),s=0;s<i.length;++s){var u=i[s];if(!(b[u]||o&&o[u]||c&&c[u]||a&&a[u])){var f=C(r,u);try{g(t,u,f)}catch(e){}}}return t};r(o(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return e.displayName||e.name||("string"==typeof e&&0<e.length?e:"Unknown")}}));var M=t.createContext();function _(e){return{context:e,withTheme:(n=e,function(o){var e=a.forwardRef(function(t,r){return a.createElement(n.Consumer,null,function(e){return a.createElement(o,s({theme:e,ref:r},t))})});return x(e,o),e}),useTheme:(t=e,function(){return a.useContext(t)}),ThemeProvider:l(e)};var t,n}var E=_(M),$=E.withTheme,F=E.ThemeProvider,R=E.useTheme;e.useTheme=R,e.ThemeContext=M,e.withTheme=$,e.createTheming=_,e.ThemeProvider=F,Object.defineProperty(e,"__esModule",{value:!0})});

package.json

 {
   "name": "theming",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "description": "Unified CSSinJS theming solution for React",
@@ -77,4 +77,4 @@ "main": "dist/theming.cjs.js",
     "nyc": "^13.1.0",
-    "react": "^16.6.0",
-    "react-test-renderer": "^16.6.0",
+    "react": "^16.8.0",
+    "react-test-renderer": "^16.8.0",
     "rimraf": "^2.6.1",
@@ -93,3 +93,3 @@ "rollup": "^0.66.6",
   "dependencies": {
-    "hoist-non-react-statics": "^3.1.0",
+    "hoist-non-react-statics": "^3.3.0",
     "prop-types": "^15.5.8",
@@ -96,0 +96,0 @@ "react-display-name": "^0.2.4",

README.md

@@ -26,2 +26,3 @@ # Theming
   * [withTheme](#withthemecomponent)
+  * [useTheme](#usetheme)
   * [createTheming](#createthemingcustomchannel)
@@ -43,3 +44,3 @@ * [Credits](#credits)
 
-Note: this component i will use later to show what theme you will get
+Note: this component is used to show what theme you receive.
 
@@ -88,3 +89,3 @@ ```jsx
 
-These components are enabling seamless theming for your react applications. And as far as you dont want to pass theme object to each and every component. Thats why you want to use context. But as far context feature is _experimental API and it is likely to break in future releases of React_ you don't want to use it directly. Here `theming` comes to play.
+These components are enabling seamless theming for your react applications. So as far as you don't want to pass the theme object to every component. That's why you want to use context. However, as far context feature is _experimental API and it is likely to break in future releases of React_ you don't want to use it directly. Here `theming` comes to play.
 
@@ -102,4 +103,4 @@ > If you insist on using context despite these warnings, try to isolate your use of context to a small area and avoid using the context API directly when possible so that it's easier to upgrade when the API changes.
 
-So you are fine to use context for theming. `theming` package provides everything you need to do that:
-* `ThemeProvider` allows you to pass and update `theme` through context down react tree.
+So you are okay to use context for theming. `theming` package provides everything you need to do that:
+* The `ThemeProvider` allows you to pass and update your theme through context down the react tree.
 * `withTheme` allows you to receive theme and its updates in your components as a `theme` prop.
@@ -131,3 +132,3 @@ * `createTheming` allows you to integrate `theming` into your CSSinJS library with a custom `context` (if you need custom one).
 
-If its `Object` and its root `ThemeProvider` then its intact and being passed down the react tree.
+If its `Object` and its root `ThemeProvider` then it's intact and being passed down the react tree.
 
@@ -142,3 +143,3 @@ ```jsx
 
-If its `Object` and its nested `ThemeProvider` then its being merged with theme from parent `ThemeProvider` and passed down to the react tree.
+If its `Object` and its nested `ThemeProvider` then it is being merged with the theme from the parent `ThemeProvider` and passed down to the react tree.
 
@@ -156,3 +157,3 @@ ```jsx
 
-If its `Function` and its nested `ThemeProvider` then its being applied to the theme from parent `ThemeProvider`. if result is an `Object` it will be passed down to the react tree, throws otherwise.
+If its `Function` and its nested `ThemeProvider` then it's being applied to the theme from parent `ThemeProvider`. If the result is an `Object` it's passed down to the react tree, throws otherwise.
 
@@ -185,5 +186,5 @@ ```jsx
 
-You need to have `ThemeProvider` with a theme somewhere upper the react tree, after that wrap your component in `withTheme` and your component will get theme as a prop. `withTheme` will handle initial theme object as well as theme updates.
+You need to have `ThemeProvider` with a theme somewhere upper the react tree after that wrap your component in `withTheme` and your component gets the theme as a prop. `withTheme`  handles the initial theme object as well as theme updates.
 
-PS. It doesnt break if you have `PureComponent` somewhere in between your ThemeProvider and withTheme (i have tests for that).
+PS. It doesn't break if you have `PureComponent` somewhere in between your `ThemeProvider` and `withTheme`.
 
@@ -227,8 +228,27 @@ Usage with Component:
 
-The `withTheme` HOC supports the new React forwardRef API so you can just use the normal ref prop.
+The `withTheme` HOC supports the new React forwardRef API so you can use the regular ref prop.
 
+### useTheme
+
+When you are on React 16.8 higher you will be able to use the `useTheme` hook which will return the theme object.
+
+Usage with Component:
+
+```jsx
+import React from 'react';
+import { useTheme } from 'theming';
+
+const DemoBox = () => {
+  const theme = useTheme();
+  console.log(theme);
+  return (<div />);
+}
+
+export default Demobox;
+```
+
 ### createTheming(context)
 
 Function to create `ThemeProvider` and `withTheme` with custom context.
-The context you pass in will be used.
+The context you pass in is used.
 
@@ -238,15 +258,16 @@ #### context
 Type: `Object`
-Result: `Object { withTheme, ThemeProvider }`
+Result: `Object { withTheme, ThemeProvider, useTheme }`
 
-`withTheme` and `ThemeProvider` will use the context passed to `createTheming`.
+`withTheme`, `ThemeProvider` and `useTheme` will use the context passed to `createTheming`.
 
+Note: You will only be able to use `useTheme` when you are on React version 16.8 or higher.
+
 ```js
 import { createTheming } from 'theming';
-import createReactContext from 'create-react-context';
+import React from 'react';
 
-const context = createReactContext({});
-
+const context = React.createContext({});
 const theming = createTheming(context);
 
-const { withTheme, ThemeProvider } = theming;
+const { withTheme, ThemeProvider, useTheme } = theming;
 
@@ -256,2 +277,3 @@ export default {
   ThemeProvider,
+  useTheme,
 };
@@ -258,0 +280,0 @@ ```

src/create-theme-provider.js

@@ -14,10 +14,3 @@ // @flow
 export default function createThemeProvider<Theme>(context: Context<Theme>) {
-  return class ThemeProvider extends React.Component<ThemeProviderProps<Theme>> {
-    static propTypes = {
-      children: PropTypes.node,
-      theme: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.func]).isRequired,
-    };
-
-    static defaultProps = { children: null };
-
+  class ThemeProvider extends React.Component<ThemeProviderProps<Theme>> {
     // Get the theme from the props, supporting both (outerTheme) => {} as well as object notation
@@ -80,3 +73,13 @@ getTheme(outerTheme: Theme) {
     }
-  };
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    ThemeProvider.propTypes = {
+      // eslint-disable-next-line react/require-default-props
+      children: PropTypes.node,
+      theme: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.func]).isRequired,
+    };
+  }
+
+  return ThemeProvider;
 }

src/create-theme-provider.test.js

@@ -78,2 +78,3 @@ // @flow
   const { root } = TestRenderer.create((
+    // $FlowFixMe: Flow complains because we require children
     <ThemeProvider theme={{}} />
@@ -80,0 +81,0 @@ ));

src/create-with-theme.js

@@ -32,3 +32,5 @@ // @flow
 
-    withTheme.displayName = `WithTheme(${getDisplayName(Component)})`;
+    if (process.env.NODE_ENV !== 'production') {
+      withTheme.displayName = `WithTheme(${getDisplayName(Component)})`;
+    }
 
@@ -35,0 +37,0 @@ hoist(withTheme, Component);

src/index.d.ts

@@ -18,2 +18,4 @@ import * as React from 'react';
 
+type UseThemeFactory<Theme> = () => Theme;
+
 interface Theming<Theme> {
@@ -23,2 +25,3 @@ context: React.Context<Theme>,
     ThemeProvider: ThemeProviderFactory<Theme>,
+    useTheme: UseThemeFactory<Theme>,
 }
@@ -31,2 +34,3 @@
 declare const ThemeContext: React.Context<DefaultTheme>;
+declare const useTheme: UseThemeFactory<DefaultTheme>;
 
@@ -37,2 +41,3 @@ export {
     withTheme,
+    useTheme,
     ThemeProvider,
@@ -39,0 +44,0 @@ ThemeProviderProps,

src/index.js

@@ -7,2 +7,3 @@ // @flow
 import createWithTheme from './create-with-theme';
+import createUseTheme from './create-use-theme';
 
@@ -17,2 +18,3 @@ type ExtractReturnType<Theme> = <ReturnType>(
   ThemeProvider: $Call<ExtractReturnType<Theme>, typeof createThemeProvider>,
+  useTheme: $Call<ExtractReturnType<Theme>, typeof createUseTheme>,
 }
@@ -26,2 +28,3 @@
     withTheme: createWithTheme(context),
+    useTheme: createUseTheme(context),
     ThemeProvider: createThemeProvider(context),
@@ -34,2 +37,3 @@ };
   ThemeProvider,
+  useTheme,
 } = createTheming(ThemeContext);
@@ -43,2 +47,3 @@
 export {
+  useTheme,
   ThemeContext,
@@ -45,0 +50,0 @@ withTheme,

src/index.test.js

@@ -23,3 +23,3 @@ // @flow
   const actual = Object.keys(theming);
-  const expected = ['context', 'withTheme', 'ThemeProvider'];
+  const expected = ['context', 'withTheme', 'useTheme', 'ThemeProvider'];
 
@@ -26,0 +26,0 @@ t.deepEqual(

No alert changes

Improved metrics

Total package byte prevSize

180778

increased by5.74%

Number of package files

18

increased by5.88%

Lines of code

1947

increased by6.98%

Number of lines in readme file

317

increased by7.46%

Worsened metrics

Number of low supply chain risk alerts

14

increased by133.33%

Dependency changes

• Updatedhoist-non-react-statics@^3.3.0