1.0.8 • Published 7 months ago
react-group-provider v1.0.8
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>
)
}