README
React Provider Wrapper 🎁
About
React Provider Wrapper wraps your application in all React context providers. This solves the issue of wrapper hell that can happen when working with multiple providers for an application or section of an application.
Example of wrapper hell
const App = () => (
<FirstProvider>
<SecondProvider>
<ThirdProvider>
<FourthProvider>
<FifthProvider>
<FirstConsumer />
<SecondConsumer />
</FifthProvider>
</FourthProvider>
</ThirdProvider>
</SecondProvider>
</FirstProvider>
)
Installing
npm
$ npm install react-provider-wrapper
yarn
$ yarn add react-provider-wrapper
Getting started
Import WrapProviders and each provider into the component that you want to the parent component of the children that you want to consume the provider
import WrapProviders from 'react-provider-wrapper'
import MockContextProvider from './mockContextProvider.tsx'
import MockSecondContextProvider from './mockSecondContextProvider.tsx'
Example provider
import React, { createContext, useState, useContext } from 'react'
const ProviderMockContext = createContext(null)
const MockContextProvider = ({ children }) => {
const [state, setState] = useState({});
return (
<ProviderMockContext.Provider value={{state, setState}}>
{children}
</ProviderMockContext.Provider>
)
}
export const useProviderMock = () => useContext(ProviderMockContext)
export default MockContextProvider
Create array of providers
const providers = [
MockContextProvider,
MockSecondContextProvider
]
This can also be refactored out into a module that contains all providers and exports them in an index.{ts,js} file
Wrap application or parent component with WrapProviders
const App = () => (
<WrapProviders providers={providers}>
<ConsumerComponent />
<AnotherConsumerComponent />
</WrapProviders>
)