A utility to flatten component pyramids in React.
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
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.
Compose component also accepts children:
import Compose from 'react-compose-components';//..<Compose=><App /></Compose>;
This package has one default export, a component called
requires a single prop,
components is an array of any of the
- A React component.
- A string (tag name such as
- 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.
This package is written in TypeScript and ships with built-in typings.