🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

create-hook-context

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

create-hook-context - npm Package Compare versions

Comparing version

to
0.0.6

dist/index.d.ts

26

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 @@

@@ -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 @@

@@ -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 @@

{
"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"

# 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>;
});
```

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet