Socket
Socket
Sign inDemoInstall

react-compose-wrappers

Package Overview
Dependencies
0
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-compose-wrappers

Compose multiple React component wrappers


Version published
Weekly downloads
167
decreased by-27.71%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

react-compose-wrappers

NPM version Build status Downloads

This package solves the issue of many providers forcing indentation runoffs.

Problem

Here's how a simple component can evolve to:

const MyApp: React.FunctionComponent = () => {
  const foo: Foo = { /* ... */ };
  const bar: Bar = { /* ... */ };
  const baz: Baz = { /* ... */ };
  return (
    <FooContext.Provider value={foo}>
      <BarContext.Provider value={bar}>
        <BazContext.Provider value={foo}>
          <MainComponent />
        </BazContext.Provider>
      </BarContext.Provider>
    </FooContext.Provider>
  );
}

Now when the user adds a ApolloProvider and react-intl, we need to keep wrapping our components.

const MyApp: React.FunctionComponent = () => {
  const locale = getLocale()
  const messages = getMessages(locale);
  const client = getApolloClient();
  const foo: Foo = { /* ... */ };
  const bar: Bar = { /* ... */ };
  const baz: Baz = { /* ... */ };
  return (
    <IntlProvider locale={locale} messages={messages}>
      <ApolloProvider client={client}>
        <FooContext.Provider value={foo}>
          <BarContext.Provider value={bar}>
            <BazContext.Provider value={foo}>
              <MainComponent />
            </BazContext.Provider>
          </BarContext.Provider>
        </FooContext.Provider>
      </ApolloProvider>
    </IntlProvider>
  );
}

Solution

This makes our component noisy and needlessly nested. This library fixes that by allowing you to specify the wrapping strategy without needing to indent or alter the rendering code:

import { composeWrappers } from 'react-compose-wrappers';

const MyApp: React.FunctionComponent = () => {
  const locale = getLocale()
  const messages = getMessages(locale);
  const client = getApolloClient();
  const foo: Foo = { /* ... */ };
  const bar: Bar = { /* ... */ };
  const baz: Baz = { /* ... */ };

  const SuperProvider = composeWrappers([

                           // Note: children can be passed via children={props.children}
    props => <IntlProvider locale={locale} messages={messages} children={props.children} />,

         // Or the usual way of <MyComponent>{props.children}</MyComponent>
    props => <ApolloProvider client={client}>{props.children}</ApolloProvider>,

    props => <FooContext.Provider value={foo}>{props.children}</FooContext.Provider>,
    props => <BarContext.Provider value={bar}>{props.children}</BarContext.Provider>,
    props => <BazContext.Provider value={baz}>{props.children}</BazContext.Provider>,
  ]);

  return (
    <SuperProvider>
      <MainComponent />
    </SuperProvider>
  );
}

Now when a new wrapper or provider is needed, you only need to alter that array with how the component should be wrapped.

FAQs

Last updated on 29 Oct 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc