https://github.com/knpwrs/react-compose-components

A utility to flatten component pyramids in React.
https://github.com/knpwrs/react-compose-components

Last synced: 2 months ago
JSON representation

A utility to flatten component pyramids in React.

• Host: GitHub
• URL: https://github.com/knpwrs/react-compose-components
• Owner: knpwrs
• License: mit
• Created: 2018-04-16T20:07:52.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T15:15:40.000Z (about 2 years ago)
• Last Synced: 2024-11-05T06:52:15.654Z (3 months ago)
• Language: TypeScript
• Size: 1.8 MB
• Stars: 13
• Watchers: 3
• Forks: 0
• Open Issues: 31
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-compose-components

[![Dependency Status](https://img.shields.io/david/knpwrs/react-compose-components.svg)](https://david-dm.org/knpwrs/react-compose-components)

[![devDependency Status](https://img.shields.io/david/dev/knpwrs/react-compose-components.svg)](https://david-dm.org/knpwrs/react-compose-components#info=devDependencies)

[![Greenkeeper badge](https://badges.greenkeeper.io/knpwrs/react-compose-components.svg)](https://greenkeeper.io/)

[![Build Status](https://img.shields.io/travis/knpwrs/react-compose-components.svg)](https://travis-ci.org/knpwrs/react-compose-components)

[![Npm Version](https://img.shields.io/npm/v/react-compose-components.svg)](https://www.npmjs.com/package/react-compose-components)

[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

[![Badges](https://img.shields.io/badge/badges-8-orange.svg)](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 () => (

  

    

      

        

          

            

              

            

          

        

      

    

  

);

```

With this library, you can do the following:

```jsx

import Compose from 'react-compose-components';

//..

export default () => (

  

);

```

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 () => (

  

    

  

);

```

## 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"