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
Example provider
const ProviderMockContext = const MockContextProvider = { const state setState = ; return <ProviderMockContextProvider value=state setState> children </ProviderMockContextProvider> } const useProviderMock =
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>