React Component Composer

A utility that help compose a bunch of components into a single one to avoid cases like provider hell.

Install with npm

npm i react-component-composer --save

Install with yarn

yarn add react-component-composer

Table of Contents

• React Component Composer
  • Table of Contents
  • Usage
  • API
    • default export
  • Development
    • Install dependencies
    • Watch mode
    • Running tests
    • Build
  • Contributing

Usage

import composeComponents from 'react-component-composer';

const Providers = composeComponents(
  SomeProvider
  [SomeProvider1, {someProps: 'SomeThing'}]
  [SomeProvider2]
  SomeProvider3
  SomeProvider4
  ['div', {className: 'main'}]
)

function App() {
  return (
    <Providers>
      <Main />
    </Providers>
  )
}

Is a replacement for

function App() {
  return (
    <SomeProvider>
      <SomeProvider1 someProps="someThing">
        <SomeProvider2>
          <SomeProvider3>
            <SomeProvider4>
              <div className="main">
                <Main />
              </div>
            </SomeProvider4>
          </SomeProvider3>
        </SomeProvider2>
      </SomeProvider1>
    </SomeProvider>
  )
}

API

default export

This package has only one default export

Params

• ...args[] {React.ElementType | [React.ElementType, Record<string, unknown>]}: List of components and props to compose

Return: {JSX.Element}: The composed component

Development

Install dependencies

yarn

Watch mode

yarn

Running tests

yarn test

Build

yarn build

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue