@wordpress/compose

What is @wordpress/compose?

@wordpress/compose is a utility library for composing higher-order components (HOCs) in React. It provides a set of functions that help in managing component state, lifecycle, and other common patterns in a more declarative and functional way.

What are @wordpress/compose's main functionalities?

withState

The `withState` HOC is used to add state to a functional component. In this example, `count` is the state variable and `setCount` is the function to update it.

const { withState } = require('@wordpress/compose');
const MyComponent = ({ count, setCount }) => (
  <div>
    <p>{count}</p>
    <button onClick={() => setCount(count + 1)}>Increment</button>
  </div>
);
const EnhancedComponent = withState('count', 'setCount', 0)(MyComponent);

withInstanceId

The `withInstanceId` HOC provides a unique instance ID to each instance of the component. This can be useful for accessibility or for differentiating between multiple instances of the same component.

const { withInstanceId } = require('@wordpress/compose');
const MyComponent = ({ instanceId }) => (
  <div>
    <p>Instance ID: {instanceId}</p>
  </div>
);
const EnhancedComponent = withInstanceId(MyComponent);

compose

The `compose` function is used to combine multiple HOCs into a single HOC. In this example, `withState` and `withInstanceId` are combined to enhance `MyComponent`.

const { compose, withState, withInstanceId } = require('@wordpress/compose');
const MyComponent = ({ count, setCount, instanceId }) => (
  <div>
    <p>Instance ID: {instanceId}</p>
    <p>{count}</p>
    <button onClick={() => setCount(count + 1)}>Increment</button>
  </div>
);
const EnhancedComponent = compose(
  withState('count', 'setCount', 0),
  withInstanceId
)(MyComponent);

Other packages similar to @wordpress/compose

recompose

Recompose is a React utility belt for function components and higher-order components. It provides a similar set of utilities for managing state, lifecycle, and other common patterns in a more functional way. Compared to @wordpress/compose, Recompose offers a broader range of utilities and is more widely used in the React community.

redux

Redux is a state management library for JavaScript applications. While it is not specifically for composing higher-order components, it provides a way to manage application state in a predictable way. Compared to @wordpress/compose, Redux is more focused on global state management rather than enhancing individual components.

react-redux

React-Redux is the official React binding for Redux. It provides HOCs like `connect` to connect React components to the Redux store. Compared to @wordpress/compose, React-Redux is specifically designed for integrating Redux with React components.

README

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...

Installation

Install the module

npm install @wordpress/compose --save

Usage

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

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

const ComponentWithInstanceIdProp = withInstanceId( WrappedComponent );

Refer to each Higher Order Component's README file for more details.