create-hook-context - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

dist/create-hook-context.cjs.js

@@ -36,6 +36,6 @@ var React = require('react');
 
-function createContext(useHook, contextName = "Hook") {
-  const Context = React.createContext(undefined);
+function createContext(useProvider = val => val, defaultValue, displayName = "Hook") {
+  const Context = React.createContext(defaultValue);
 
-  const Provider = (_ref) => {
+  const ContextProvider = (_ref) => {
     let {
@@ -46,3 +46,3 @@ children
 
-    const value = useHook(options);
+    const value = useProvider(options);
     return React.createElement(Context.Provider, {
@@ -54,4 +54,4 @@ value: value
 
-  Context.displayName = contextName + "Context";
-  Provider.displayName = contextName + "Provider"; // }
+  Context.displayName = displayName + "Context";
+  ContextProvider.displayName = displayName + "Provider"; // }
 
@@ -62,3 +62,3 @@ const useContext = () => {
     if (context === undefined) {
-      console.warn("use" + contextName + "Context must be used within a " + contextName + "Provider");
+      console.warn("use" + displayName + "Context must be used within a " + displayName + "Provider or the context must be created with a defaultValue");
     } // }
@@ -70,13 +70,15 @@
 
-  function withContext(options, Component) {
-    const WithContext = React.forwardRef((props, ref) => React.createElement(Provider, options, React.createElement(Component, _extends({}, props, {
+  useContext.displayName = "use" + displayName;
+
+  function withContextProvider(options, Component) {
+    const WithContextProvider = React.forwardRef((props, ref) => React.createElement(ContextProvider, options, React.createElement(Component, _extends({}, props, {
       ref: ref
     })))); // if (undefined === "development") {
 
-    WithContext.displayName = "With" + contextName + "(" + (Component.displayName || Component.name || "Component") + ")"; // }
+    WithContextProvider.displayName = "With" + displayName + "Provider(" + (Component.displayName || Component.name || "Component") + ")"; // }
 
-    return WithContext;
+    return WithContextProvider;
   }
 
-  return [Provider, useContext, withContext, Context];
+  return [ContextProvider, useContext, withContextProvider, Context];
 }
@@ -83,0 +85,0 @@

dist/create-hook-context.js

@@ -36,6 +36,6 @@ import { createContext as createContext$1, createElement, useContext, forwardRef } from 'react';
 
-function createContext(useHook, contextName = "Hook") {
-  const Context = createContext$1(undefined);
+function createContext(useProvider = val => val, defaultValue, displayName = "Hook") {
+  const Context = createContext$1(defaultValue);
 
-  const Provider = (_ref) => {
+  const ContextProvider = (_ref) => {
     let {
@@ -46,3 +46,3 @@ children
 
-    const value = useHook(options);
+    const value = useProvider(options);
     return createElement(Context.Provider, {
@@ -54,4 +54,4 @@ value: value
 
-  Context.displayName = contextName + "Context";
-  Provider.displayName = contextName + "Provider"; // }
+  Context.displayName = displayName + "Context";
+  ContextProvider.displayName = displayName + "Provider"; // }
 
@@ -62,3 +62,3 @@ const useContext$1 = () => {
     if (context === undefined) {
-      console.warn("use" + contextName + "Context must be used within a " + contextName + "Provider");
+      console.warn("use" + displayName + "Context must be used within a " + displayName + "Provider or the context must be created with a defaultValue");
     } // }
@@ -70,13 +70,15 @@
 
-  function withContext(options, Component) {
-    const WithContext = forwardRef((props, ref) => createElement(Provider, options, createElement(Component, _extends({}, props, {
+  useContext$1.displayName = "use" + displayName;
+
+  function withContextProvider(options, Component) {
+    const WithContextProvider = forwardRef((props, ref) => createElement(ContextProvider, options, createElement(Component, _extends({}, props, {
       ref: ref
     })))); // if (undefined === "development") {
 
-    WithContext.displayName = "With" + contextName + "(" + (Component.displayName || Component.name || "Component") + ")"; // }
+    WithContextProvider.displayName = "With" + displayName + "Provider(" + (Component.displayName || Component.name || "Component") + ")"; // }
 
-    return WithContext;
+    return WithContextProvider;
   }
 
-  return [Provider, useContext$1, withContext, Context];
+  return [ContextProvider, useContext$1, withContextProvider, Context];
 }
@@ -83,0 +85,0 @@

dist/create-hook-context.umd.js

@@ -39,14 +39,20 @@ (function (global, factory) {
 
-  function createContext(useHook, contextName) {
-    if (contextName === void 0) {
-      contextName = "Hook";
+  function createContext(useProvider, defaultValue, displayName) {
+    if (useProvider === void 0) {
+      useProvider = function useProvider(val) {
+        return val;
+      };
     }
 
-    var Context = React.createContext(undefined);
+    if (displayName === void 0) {
+      displayName = "Hook";
+    }
 
-    var Provider = function Provider(_ref) {
+    var Context = React.createContext(defaultValue);
+
+    var ContextProvider = function ContextProvider(_ref) {
       var children = _ref.children,
           options = _objectWithoutPropertiesLoose(_ref, ["children"]);
 
-      var value = useHook(options);
+      var value = useProvider(options);
       return React.createElement(Context.Provider, {
@@ -58,4 +64,4 @@ value: value
 
-    Context.displayName = contextName + "Context";
-    Provider.displayName = contextName + "Provider"; // }
+    Context.displayName = displayName + "Context";
+    ContextProvider.displayName = displayName + "Provider"; // }
 
@@ -66,3 +72,3 @@ var useContext = function useContext() {
       if (context === undefined) {
-        console.warn("use" + contextName + "Context must be used within a " + contextName + "Provider");
+        console.warn("use" + displayName + "Context must be used within a " + displayName + "Provider or the context must be created with a defaultValue");
       } // }
@@ -74,5 +80,7 @@
 
-    function withContext(options, Component) {
-      var WithContext = React.forwardRef(function (props, ref) {
-        return React.createElement(Provider, options, React.createElement(Component, _extends({}, props, {
+    useContext.displayName = "use" + displayName;
+
+    function withContextProvider(options, Component) {
+      var WithContextProvider = React.forwardRef(function (props, ref) {
+        return React.createElement(ContextProvider, options, React.createElement(Component, _extends({}, props, {
           ref: ref
@@ -82,8 +90,8 @@ })));
 
-      WithContext.displayName = "With" + contextName + "(" + (Component.displayName || Component.name || "Component") + ")"; // }
+      WithContextProvider.displayName = "With" + displayName + "Provider(" + (Component.displayName || Component.name || "Component") + ")"; // }
 
-      return WithContext;
+      return WithContextProvider;
     }
 
-    return [Provider, useContext, withContext, Context];
+    return [ContextProvider, useContext, withContextProvider, Context];
   }
@@ -90,0 +98,0 @@

package.json

 {
   "name": "create-hook-context",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Create context using a hook for providers",
@@ -11,3 +11,3 @@ "repository": "nksaraf/create-hook-context",
   "module": "dist/create-hook-context.js",
-  "source": "src/create-hook-context.tsx",
+  "source": "src/index.tsx",
   "browser": "dist/create-hook-context.umd.js",
@@ -20,16 +20,18 @@ "types": "dist/create-hook-context.d.ts",
     "build": "klap build --no-minify",
-    "postbuild": "tsc -p tsconfig.json",
+    "postbuild": "tsc -p tsconfig.build.json",
     "prepublishOnly": "yarn build",
     "start": "klap start",
-    "watch": "klap watch"
+    "watch": "klap watch",
+    "dev": "next"
   },
   "devDependencies": {
+    "@types/next": "^9.0.0",
+    "@types/node": "^13.13.0",
     "@types/react": "^16.9.34",
     "klap": "4.2.3",
+    "next": "^9.3.5",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "typescript": "3.8.3"
   },
-  "dependencies": {
-    "@types/node": "^13.13.0",
-    "react": "^16.13.1"
-  },
   "peerDependencies": {
@@ -36,0 +38,0 @@ "react": "^16.8"

README.md

 # create-hook-context
 
+A more powerful version of `React.createContext`. Accepts a hook that takes in props for a provider, and then returned value of the hook, is the value provided to the context's consumers.
+
+Signature:
+
+```javascript
+
+import createContext from 'create-hook-context';
+
+const [ThemeProvider, useTheme, withThemeProvider, ThemeContext] = createContext(
+  ({ theme }) => theme, // hook that provides values for context given input
+  {}, // defaultValue for context
+  "Theme" // displayName for Context
+)
+
+const Consumer = () => {
+  const val = useTheme();
+  return <pre>{JSON.stringify(val)}</pre>;
+};
+
+const App = () => {
+  return (
+    <ThemeProvider theme={{ a: 1 }}>
+      <Consumer />
+    </ThemeProvider>
+  );
+};
+
+/* or can use withThemeProvider to wrap components */
+
+const App = withThemeProvider({ theme: { a: 1 } }, () => {
+  const val = useTheme();
+  return <pre>{JSON.stringify(val)}</pre>;
+});
+
+
+```

No alert changes

Improved metrics

Total package byte prevSize

24569

18.01%

Dependency count

1

-66.67%

Number of package files

11

10%

Lines of code

209

7.73%

Number of lines in readme file

39

1200%

Worsened metrics

Dev dependency count

8

166.67%

Dependency changes

• - Removed

  @types/node@^13.13.0

• - Removed

  react@^16.13.1

• - Removed

  @types/node@13.13.52
  (transitive)