https://github.com/sevenoutman/compose-providers
Compose your React provider components to avoid boilerplates.
https://github.com/sevenoutman/compose-providers
react
Last synced: 5 months ago
JSON representation
Compose your React provider components to avoid boilerplates.
- Host: GitHub
- URL: https://github.com/sevenoutman/compose-providers
- Owner: SevenOutman
- License: mit
- Created: 2022-03-28T03:46:52.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-04-06T10:47:46.000Z (about 4 years ago)
- Last Synced: 2025-01-28T13:24:41.551Z (over 1 year ago)
- Topics: react
- Language: TypeScript
- Homepage:
- Size: 38.1 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# compose-providers
Compose your React provider components to avoid boilerplates.
[](https://npm.im/compose-providers) [](https://npm.im/compose-providers)
## Install
```bash
npm i compose-providers
```
## Usage
Assume you're using serveral libraries that requires using their provider components like:
- react-error-boundary
- react-intl
- react-query
- react-router
and you have to nest them around your app to get everything work
```jsx
render(
{/** your app */}
,
)
```
With `compose-providers` you can compose those providers into one component so that you get rid of all those boilerplates.
```jsx
import { composeProviders } from "compose-providers"
const AppContainer = composeProviders([
ErrorBoundary,
// You won't be unfamiliar if you have configured tools like babel/eslint
[
QueryClientProvider,
{
client: queryClient,
},
],
[
IntlProvider,
{
locale,
messages,
},
],
BrowserRouter,
])
render({/** your app */})
```
This is especiall useful when you are writing tests and need to combine different providers as wrappers to get your component work:
```jsx
// RouteComponent.test.tsx
import { render } from "@testing-library/react"
// const wrapper = (props) => (
//
// {props.children}
//
// )
const wrapper = composeProviders([QueryClientProvider, BrowserRouter])
render(, {
wrapper,
})
// IntlComponent.test.tsx
import { render } from "@testing-library/react"
// const wrapper = (props) => (
//
// {props.children}
//
// )
const wrapper = composeProviders([QueryClientProvider, IntlProvider])
render(, {
wrapper,
})
```
## License
MIT © [SevenOutman](https://github.com/SevenOutman)