Compose

The compose package is a collection of handy Higher Order Components (HOCs) you can use to wrap your WordPress components and provide some basic features like: state, instance id, pure...

The compose function is an alias to flowRight from Lodash. It comes from functional programming, and allows you to compose any number of functions. You might also think of this as layering functions; compose will execute the last function first, then sequentially move back through the previous functions passing the result of each function upward.

An example that illustrates it for two functions:

const compose = ( f, g ) => x
    => f( g( x ) );

Here's a simplified example of compose in use from Gutenberg's PluginSidebar component:

Using compose:

const applyWithSelect = withSelect( ( select, ownProps ) => {
    return doSomething( select, ownProps);
} );
const applyWithDispatch = withDispatch( ( dispatch, ownProps ) => {
    return doSomethingElse( dispatch, ownProps );
} );

export default compose(
    withPluginContext,
    applyWithSelect,
    applyWithDispatch,
)( PluginSidebarMoreMenuItem );

Without compose, the code would look like this:

const applyWithSelect = withSelect( ( select, ownProps ) => {
    return doSomething( select, ownProps);
} );
const applyWithDispatch = withDispatch( ( dispatch, ownProps ) => {
    return doSomethingElse( dispatch, ownProps );
} );

export default withPluginContext(
    applyWithSelect(
        applyWithDispatch(
            PluginSidebarMoreMenuItem
        )
    )
);


## Installation

Install the module

```bash
npm install @wordpress/compose --save

This package assumes that your code will run in an ES2015+ environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using core-js or @babel/polyfill will add support for these methods. Learn more about it in Babel docs.

Usage

An example using the HOC withInstanceId from the compose package:

import { withInstanceId } from '@wordpress/compose';

function WrappedComponent( props ) {
    return props.instanceId;
}

const ComponentWithInstanceIdProp = withInstanceId( WrappedComponent );

For more details, you can refer to each Higher Order Component's README file. Available components are located here.