create-hook-context
Advanced tools
Comparing version
@@ -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
24569
18.01%1
-66.67%11
10%209
7.73%39
1200%8
166.67%- Removed
- Removed
- Removed