react-compose-components
Version:
A utility to flatten component pyramids in React.
114 lines (93 loc) • 3.81 kB
Markdown
# react-compose-components
[](https://david-dm.org/knpwrs/react-compose-components)
[](https://david-dm.org/knpwrs/react-compose-components#info=devDependencies)
[](https://greenkeeper.io/)
[](https://travis-ci.org/knpwrs/react-compose-components)
[](https://www.npmjs.com/package/react-compose-components)
[](https://opensource.org/licenses/MIT)
[](http://commitizen.github.io/cz-cli/)
[](http://shields.io/)
A utility to flatten component pyramids in React.
## Installation
```
npm i react-compose-components
```
## Inspiration and Usage
If you have ever worked on a large-scale React application you are probably
familiar with what I refer to as a "provider pyramid." Consider an application
that uses [`react`], [`redux`], [`glamorous`], [`react-i18next`],
[`react-instantsearch`] (Algolia), [`react-router`], and perhaps some internal
providers. You could have a root component that looks something like this:
```jsx
// ...
export default () => (
<Router history={history}>
<ThemeProvider theme={theme}>
<I18nextProvider i18n={i18n}>
<ReduxProvider store={store}>
<InternalProvider1>
<InternalProvider2>
<App />
</InternalProvider2>
</InternalProvider1>
</ReduxProvider>
</I18nextProvider>
</ThemeProvider>
</Router>
);
```
With this library, you can do the following:
```jsx
import Compose from 'react-compose-components';
//..
export default () => (
<Compose
components={[
[Router, { history }],
[ThemeProvider, { theme }]
[ReduxProvider, { store }]
InternalProvider1,
InternalProvider2,
App,
]}
/>
);
```
This flattens the pyramid leading to better maintainability and cleaner VCS diffs.
The `Compose` component also accepts children:
```jsx
import Compose from 'react-compose-components';
//..
export default () => (
<Compose
components={[
[Router, { history }],
[ThemeProvider, { theme }]
[ReduxProvider, { store }]
InternalProvider1,
InternalProvider2,
]}
>
<App />
</Compose>
);
```
## API
This package has one default export, a component called `Compose`. `Compose`
requires a single prop, `components`. `components` is an array of any of the
following:
* A React component.
* A string (tag name such as `'div'`).
* A two-element array where the first element is either a React component or a
string, and the second element is an object representing props to pass to the
component.
## TypeScript
This package is written in TypeScript and ships with built-in typings.
## License
**MIT**
[`react`]: https://reactjs.org/ "React - A JavaScript Library for Building User Interfaces"
[`redux`]: https://redux.js.org/ "A Predictable State Container for JavaScript Apps"
[`glamorous`]: https://glamorous.rocks/ "glamorous - React Component Styling Solved 💄"
[`react-i18next`]: https://react.i18next.com/ "An Internationalization Addon for React.js"
[`react-instantsearch`]: https://community.algolia.com/react-instantsearch/ "Lightning-Fast Search for React Apps"
[`react-router`]: https://reacttraining.com/react-router/ "Declarative Routing for React.js"