Initial commit

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2012-2021 Alister Norris
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,100 @@
+# 📞 React Outside Call
+
+Use react hooks/context outside of React. Useful if you're using react packages that don't have this functionality, or you want access context hooks `useContext` outside of React.
+
+## Install
+
+```
+npm install react-outside-call
+```
+
+## Quickstart
+
+### Step 1
+
+Create outside caller object with the hooks you want to use like this...
+```jsx
+import OutsideCallConsumer, { createCaller } from 'react-outside-call';
+
+const callConfig = createCaller({
+  myUserContext: () => useContext(myUserContext),
+  useToasts: () => useToasts(),
+  apolloClient: () => useApolloClient(),
+});
+```
+
+
+### Step 2
+
+Add the `<OutsideCallConsumer config={callConfig} />` component just after all the Provider components.
+
+*Note*: 
+
+- Always put `<OutsideCallConsumer>` after all the Provider components
+- This will not rerender `<App />` if any context's get updated, so you don't need to worry about unnecessary rerenders!
+
+
+Example:
+
+```jsx
+import React, { useContext } from 'react';
+import ReactDOM from 'react-dom';
+import App from './app';
+import { ToastProvider } from 'react-toast-notifications';
+import myUserContext, MyUserContextProvider from './myUserContext';
+import OutsideCallConsumer, { createCaller } from 'react-outside-call';
+import apolloClient from './apolloClient';
+
+export const callConfig = createCaller({
+  myUserContext: () => useContext(myUserContext),
+  useToasts: () => useToasts(),
+  apolloClient: () => useApolloClient(),
+});
+
+ReactDOM.render(
+  <ApolloProvider client={apolloClient}>
+    <ToastProvider>
+      <MyUserContextProvider>
+        <OutsideCallConsumer config={callConfig}> 
+          <App />
+        </OutsideCallConsumer>
+      </MyUserContextProvider>
+    </ToastProvider>
+  </ApolloProvider>,
+  document.getElementById('root')
+);
+```
+
+
+
+### Step 3
+Now call `callConfig` using the `call` object wherever you like in your project - like inside a normal javascript function, redux sagas, etc..
+```jsx
+import { callConfig } from './index';
+
+export const logHttpFailure = () => {
+  callConfig.call.useToasts.addToast({ message: 'Network error' });
+  console.log(`User failure ${callConfig.call.myContext}.`);
+};
+```
+
+
+<!-- ## Events
+
+We can also do event handling. if any return values of the hooks change value we 
+can register an event. For example, lets register when the myUserContext context value changes.
+
+
+```jsx
+const callConfig = createCaller({
+  myUserContext: () => useContext(myUserContext)
+});
+
+
+callConfig.on('myUserContext', (value) => {
+  console.log(`User context value changed to ${value}.`)
+})
+
+
+
+``` -->

lib/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+
+type Default = { [key: string]: any  };
+
+type CallerObj<T extends Default> = {
+    [Property in keyof T]?: ReturnType<T[Property]>
+}
+
+type OutsideConfig<Type extends Default> = {
+  call: CallerObj<Type>
+  initCaller: CallerObj<Type>
+}
+
+export function createCaller<T>(initCaller: T): OutsideConfig<T> {
+  return {
+    initCaller,
+    call: {}
+  }
+}
+
+const OutsideCallConsumer: React.FC<Default> = ({ config }) => {
+  for(let key in config.initCaller) {
+    config.call[key] = config.initCaller[key]()
+  }
+  return null
+}
+
+interface OutsideCallConsumerWrapperProps {
+  config: Default
+}
+
+const OutsideCallConsumerWrapper: React.FC<OutsideCallConsumerWrapperProps> = ({ children, config }) => (
+  <>
+    {children}
+    <OutsideCallConsumer config={config} />
+  </>
+)
+
+export default OutsideCallConsumerWrapper