react-compose-components
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
, react-router
, and perhaps some internal
providers. You could have a root component that looks something like this:
// ... <Router => <ThemeProvider => <I18nextProvider => <ReduxProvider => <InternalProvider1> <InternalProvider2> <App /> </InternalProvider2> </InternalProvider1> </ReduxProvider> </I18nextProvider> </ThemeProvider> </Router>;
With this library, you can do the following:
import Compose from 'react-compose-components';//.. <Compose = />;
This flattens the pyramid leading to better maintainability and cleaner VCS diffs.
The Compose
component also accepts children:
import Compose from 'react-compose-components';//.. <Compose = > <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