react-group-provider

React Group Provider

resolve the nest issue with react provider

Table of Contents

• Getting Started
• Document
• Example
• License

Getting Started

First install according to the package maneger you are using

install npm

npm i react-group-provider

install yarn

yarn add react-group-provider

install pnpm

pnpm add react-group-provider

Outline

When providers are nested, it becomes hard to follow, so we'll address that

Normally, it would be as follows

const App: React.FC = () => {
  return (
    <AProvider>
      <BProvider>
        <CProvider>
          <DProvider>
            <EProvider>
              <FProvider>
                <Component />
              </FProvider>
            </EProvider>
          </DProvider>
        </CProvider>
      </BProvider>
    </AProvider>
  )
}
export default App

We resolve that as follows

const Providers = GroupProvider([StrictMode, ExampleProvider1, ExampleProvider2]);

const DemoComponents = () => {
  return (
    <Providers>
      <App />
    </Providers>
  )
}

or

const list = [ 
	StrictMode,
	ExampleProvider1,
	ExampleProvider2,
	ExampleProvider3,
	ExampleProvider4,
	ExampleProvider5,
	ExampleProvider6,
	ExampleProvider7,
	ExampleProvider8,
	ExampleProvider9
]

const Providers = GroupProvider(list);

const DemoComponents = () => {
	return (
		<Providers>
			<App />
		</Providers>
	)
}

Example

code link ./ apps / example

import { StrictMode } from 'react';
import GroupProvider from 'react-group-provider';
import ExampleProvider1 from '@/components/~'
import ExampleProvider2 from '@/components/~'

const Providers = GroupProvider([StrictMode, ExampleProvider1, ExampleProvider2]);

const DemoComponents = () => {
	return (
		<Providers>
			<App />
		</Providers>
	)
}

License

MIT