React Context Summoner

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-context-summoner

Quickstart

Add the ContextSummoner component just after all the Provider components, the feed in the summoner object with the context hooks, these can be from other modules like

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 ContextSummoner, { createSummoner } from 'react-context-summoner';
import apolloClient from './apolloClient'

export const summoner = createSummoner({
  myUserContext: () => useContext(myUserContext),
  useToasts: () => useToasts(),
  apolloClient: () => useApolloClient(),
})

ReactDOM.render(
  <ApolloProvider client={apolloClient}>
    <ToastProvider>
      <MyUserContextProvider>
        <ContextSummoner> 
          <App />
        </ContextSummoner>
      </MyUserContextProvider>
    </ToastProvider>
  </ApolloProvider>,
  document.getElementById('root'),
);

2. Now call summoner where ever.

import { summoner } from './index';

export const logHttpFailure = () => {
  summoner.useToasts.addToast({ message: 'Network error' })
  console.log(`User failure ${summoner.myContext}.`)
};

Note: Always put <ContextSummoner> after all the Provider components