Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/morewings/react-omni-provider
Omni Provider allows to merge multiple React Provider components into one
https://github.com/morewings/react-omni-provider
context context-api emotion global-state react styled-components styled-components-theme theme-provider theme-switcher
Last synced: 11 days ago
JSON representation
Omni Provider allows to merge multiple React Provider components into one
- Host: GitHub
- URL: https://github.com/morewings/react-omni-provider
- Owner: morewings
- License: mit
- Created: 2024-04-19T13:46:39.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2024-12-04T20:39:15.000Z (19 days ago)
- Last Synced: 2024-12-04T21:34:16.458Z (19 days ago)
- Topics: context, context-api, emotion, global-state, react, styled-components, styled-components-theme, theme-provider, theme-switcher
- Language: TypeScript
- Homepage:
- Size: 18 MB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/morewings/react-omni-provider/actions/workflows/merge-jobs.yml)
[](https://github.com/morewings/react-omni-provider)
[](https://www.npmjs.com/package/react-omni-provider)
[](https://github.com/morewings/css-vars-hook)
[](https://bundlejs.com/?q=react-omni-provider@latest&config={%22esbuild%22:{%22external%22:[%22react%22,%22react-dom%22]}})
[](https://codeclimate.com/github/morewings/react-omni-provider/maintainability)
[](https://codeclimate.com/github/morewings/react-omni-provider/test_coverage)
# React Omni Provider
**React Omni Provider** is an utility component which allows to merge multiple Providers (wrapper components that create context or another global state).
## Install
```shell
npm i react-omni-provider
```
## Use
Provider component is a very popular React development pattern. Provider allows to create global state for your application. The problem is that today, plenty of libraries are using such approach. So after some time, your root file will probably look like the one below. Which sadly reminds infamous callback hell.
### Before
```tsx
import { ThemeProvider } from '@emotion/react'
import { Provider } from 'react-redux'
import { AuthProvider } from 'authorization-package';
import { ConsentProvider } from 'consent-package';
import { NotificationProvider } from '@/lib/Notification';
import { ModalProvider } from '@/lib/Modal';
import { FeatureProvider } from '@/lib/Feature';
// etc
export const App: FC = ({children}) => {
return (
{children}
);
};
```
### After
React Omni Provider allows you to use just one Provider component instead. You can provide a list of used providers as an array. Providers are applied from left to right. So the first item in the list becomes the first wrapper.
```tsx
import { OmniProvider } from 'react-omni-provider';
import { ProviderA } from 'ProviderA';
import { ProviderB } from 'ProviderB';
import { ProviderC } from 'ProviderC';
const providerConfig = [
// you can add just provider component
ProviderA,
// or attach props to it
[ProviderB, {prop: 'value'}],
ProviderC
]
export const App: FC = ({children}) => {
// same as {children}
return (
{children}
);
};
```
## Higher-order Component
There is also a higher-order component available with the same functionality.
```tsx
import type {ComponentProps} from 'react';
import { withOmniProvider } from 'react-omni-provider';
import { ProviderA } from 'ProviderA';
import { ProviderB } from 'ProviderB';
import { ProviderC } from 'ProviderC';
const providerConfig = [
// you can add just provider component
ProviderA,
// or attach props to it
[ProviderB, {prop: 'value'} as ComponentProps],
ProviderC
]
const App: FC = ({children}) => {
return (
{children}
);
};
export const WrappedApp = withOmniProvider(providerConfig)(App)
```