{"id":22813168,"url":"https://github.com/morewings/react-omni-provider","last_synced_at":"2025-04-22T16:21:51.701Z","repository":{"id":234483715,"uuid":"788992813","full_name":"morewings/react-omni-provider","owner":"morewings","description":"Omni Provider allows to merge multiple React Provider components into one","archived":false,"fork":false,"pushed_at":"2025-03-20T08:58:44.000Z","size":19436,"stargazers_count":8,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-29T16:41:30.560Z","etag":null,"topics":["context","context-api","emotion","global-state","react","styled-components","styled-components-theme","theme-provider","theme-switcher"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/morewings.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-19T13:46:39.000Z","updated_at":"2025-03-22T18:18:56.000Z","dependencies_parsed_at":"2024-04-21T19:56:52.179Z","dependency_job_id":"11f02393-fae1-4df5-98e3-932c61ffd38d","html_url":"https://github.com/morewings/react-omni-provider","commit_stats":null,"previous_names":["morewings/react-omni-provider"],"tags_count":9,"template":false,"template_full_name":"morewings/react-library-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morewings%2Freact-omni-provider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morewings%2Freact-omni-provider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morewings%2Freact-omni-provider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morewings%2Freact-omni-provider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/morewings","download_url":"https://codeload.github.com/morewings/react-omni-provider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250275595,"owners_count":21403694,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["context","context-api","emotion","global-state","react","styled-components","styled-components-theme","theme-provider","theme-switcher"],"created_at":"2024-12-12T12:15:50.658Z","updated_at":"2025-04-22T16:21:51.678Z","avatar_url":"https://github.com/morewings.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Release](https://github.com/morewings/react-omni-provider/actions/workflows/merge-jobs.yml/badge.svg)](https://github.com/morewings/react-omni-provider/actions/workflows/merge-jobs.yml)\n[![types included](https://img.shields.io/github/package-json/types/morewings/react-omni-provider)](https://github.com/morewings/react-omni-provider)\n[![npm version](https://badge.fury.io/js/react-omni-provider.svg)](https://www.npmjs.com/package/react-omni-provider)\n[![zero dependencies](https://img.shields.io/badge/zero-dependencies-teal)](https://github.com/morewings/css-vars-hook)\n[![npm bundle size](https://deno.bundlejs.com/badge?q=react-omni-provider@latest\u0026config={%22esbuild%22:{%22external%22:[%22react%22,%22react-dom%22]}})](https://bundlejs.com/?q=react-omni-provider@latest\u0026config={%22esbuild%22:{%22external%22:[%22react%22,%22react-dom%22]}})\n[![Maintainability](https://api.codeclimate.com/v1/badges/e96c5a81106945e6bfed/maintainability)](https://codeclimate.com/github/morewings/react-omni-provider/maintainability)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/e96c5a81106945e6bfed/test_coverage)](https://codeclimate.com/github/morewings/react-omni-provider/test_coverage)\n\n# React Omni Provider\n\n\u003cimg src=\"./design/picture.jpg\" alt=\"React Omni Provider\"\u003e\n\n**React Omni Provider** is an utility component which allows to merge multiple Providers (wrapper components that create context or another global state).\n\n## Install\n\n```shell\nnpm i react-omni-provider\n```\n\n## Use\nProvider 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.\n\n### Before\n\n```tsx\nimport { ThemeProvider } from '@emotion/react'\nimport { Provider } from 'react-redux'\nimport { AuthProvider } from 'authorization-package';\nimport { ConsentProvider } from 'consent-package';\nimport { NotificationProvider } from '@/lib/Notification';\nimport { ModalProvider } from '@/lib/Modal';\nimport { FeatureProvider } from '@/lib/Feature';\n// etc\n\nexport const App: FC\u003cProps\u003e = ({children}) =\u003e {\n    return (\n        \u003cAuthProvider  secret={secret}\u003e\n            \u003cConsentProvider\u003e\n                \u003cProvider store={store}\u003e\n                    \u003cThemeProvider theme={theme}\u003e\n                        \u003cNotificationProvider\u003e\n                            \u003cFeatureProvider\u003e\n                                \u003cModalProvider\u003e\n                                    {children}\n                                \u003c/ModalProvider\u003e\n                            \u003c/FeatureProvider\u003e\n                        \u003c/NotificationProvider\u003e\n                    \u003c/ThemeProvider\u003e\n                \u003c/Provider\u003e\n            \u003c/ConsentProvider\u003e\n        \u003c/AuthProvider\u003e\n    );\n};\n```\n\n### After\n\nReact 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.\n\n```tsx\nimport { OmniProvider } from 'react-omni-provider';\nimport { ProviderA } from 'ProviderA';\nimport { ProviderB } from 'ProviderB';\nimport { ProviderC } from 'ProviderC';\n\nconst providerConfig = [\n        // you can add just provider component\n        ProviderA,\n        // or attach props to it\n        [ProviderB, {prop: 'value'}],\n        ProviderC\n]\n\nexport const App: FC\u003cProps\u003e = ({children}) =\u003e {\n    // same as \u003cProviderA\u003e\u003cProviderB prop=\"value\"\u003e\u003cProviderC\u003e{children}\u003c/ProviderC\u003e\u003c/ProviderB\u003e\u003c/ProviderA\u003e\n    return (\n            \u003cOmniProvider providerConfig={providerConfig}\u003e\n                {children}\n            \u003c/OmniProvider\u003e\n    );\n};\n```\n\n## Higher-order Component\n\nThere is also a higher-order component available with the same functionality.\n\n```tsx\nimport type {ComponentProps} from 'react';\nimport { withOmniProvider } from 'react-omni-provider';\nimport { ProviderA } from 'ProviderA';\nimport { ProviderB } from 'ProviderB';\nimport { ProviderC } from 'ProviderC';\n\nconst providerConfig = [\n        // you can add just provider component\n        ProviderA,\n        // or attach props to it\n        [ProviderB, {prop: 'value'} as ComponentProps\u003ctypeof ProviderB\u003e],\n        ProviderC\n]\n\nconst App: FC\u003cProps\u003e = ({children}) =\u003e {\n    return (\n            {children}\n    );\n};\n\nexport const WrappedApp = withOmniProvider(providerConfig)(App)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorewings%2Freact-omni-provider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmorewings%2Freact-omni-provider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorewings%2Freact-omni-provider/lists"}