Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@wordpress/compose
Advanced tools
@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.
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);
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 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 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.
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...
Install the module
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.
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.
FAQs
WordPress higher-order components (HOCs).
The npm package @wordpress/compose receives a total of 107,850 weekly downloads. As such, @wordpress/compose popularity was classified as popular.
We found that @wordpress/compose demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 23 open source maintainers collaborating on the project.
Did you know?
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.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.