React Property Provider

React Property Provider aims at making it easier to use the React context to pass information down to a subtree of components without having to use properties.

Installation

React Property Provider requires React v15.5 or later.

npm install --save react-property-provider

When to Use

If you want to pass properties down a subtree without having to add props to all intermediary components and you don't have any other good solution, then this might be for you.

Usage

You use the PropertyProvider component to add properties to a subtree and the withProperties wrapper to pick them up.

Example:

import React from 'react';
import PropertyProvider from 'react-property-provider';

// App component
function App(props) {
    return (
        <App>
            <PropertyProvider themeColor="blue" greeting="Hello!">
                <Pane position="Left"/>
            </PropertyProvider>
            <PropertyProvider themeColor="red" greeting="Yo!">
                <Pane position="Right"/>
            </PropertyProvider>
        </App>
    );
}

function Pane() {
    return (
        <div>
            <ThemedGreeting />
            Some text that you won't read.
        </div>
    );
}

function PureThemedGreeting({themeColor, greeting}) {
    return <div style={{color:themeColor}}>{greeting}</div>;
}
const ThemedGreeting =
    withProperties(PureThemedGreeting, 'themeColor', 'greeting');

Notice how the App component adds different values to different subtrees. The Pane component does not care for neither theme color nor the greeting phrase. In the end, ThemedGreeting will pick up the specified properties and inject them into the pure PureThemedGreeting.

Traditionally, you would pass these values as properties to the Pane component which would pass them on to ThemedGreeting.

More Information

• React Property Provider is basically just a layer on top of the React context. Here is more information about the React context and why not to use it.
• This article by Michel Weststrate was the inspiration for this library.
• Redux is absolutely something to consider for a larger application, and may very well solve your problem.
• There are other ways than just props and redux for inter-component communcation. This article is a good overview.

License

MIT