Use WordPress hooks in react project

WordPress hooks

WordPress hooks are actions or filters that allow developers to modify or extend the functionality of react project. They are used to add or remove functionality from other react script or project, without modifying their original code.

The @wordpress/hooks package is an npm package that provides a set of functions for working with WordPress hooks in JavaScript. It is part of the @wordpress package ecosystem, which includes a wide range of packages for building WordPress plugins and themes using modern JavaScript.

Install the @wordpress/hooks dependency in your react project by the following NPM command –

npm install @wordpress/hooks

There are two types of hooks in WordPress:

1. Actions: Actions are events triggered by main project, which allow developers to add custom code to execute at specific points in the core project. Actions are used to add functionality or modify behavior, such as adding a new content, updating an existing content.
2. Filters: Filters allow developers to modify the output of core project by modifying the data before it is displayed to the user. Filters are used to modify content can be used to modify data before it sends to server.

Here are some of the functions provided by the @wordpress/hooks package:

• addAction: Adds an action hook that executes a custom function when the event occurs.
• addFilter: Adds a filter hook that modifies the output of a WordPress function or a plugin.
• removeAction: Removes an action hook that was added by a theme or a plugin.
• removeFilter: Removes a filter hook that was added by a theme or a plugin.
• doAction: Executes an action hook and triggers any functions that have been added to it.
• applyFilters: Modifies the output of a filter hook and passes the modified value to any functions that have been added to it.

These functions work similarly to their PHP counterparts in WordPress core, but are written in JavaScript and designed to work with modern JavaScript frameworks and libraries.

Using the @wordpress/hooks package, developers can easily add custom functionality to their WordPress plugins and themes using modern JavaScript, and take advantage of the many benefits of working with JavaScript, such as improved performance, code organization, and developer productivity.

Setup @wordpress/hooks in project

The @wordpress/hooks package provides a createHooks() function. This function allows developers to create hooks integration in project, which provide the functionality to use addFilter() and addAction() functions.

After dependency installation create a hooks.js and place the following code in the file –

import { createHooks } from '@wordpress/hooks';


if (!window.wkHooks) {
    let wkHooks = createHooks();
    window.wkHooks = wkHooks;
}

export const {
    filters,
    addFilter,
    applyFilters,
    removeFilter,
    removeAllFilters,
    actions,
    addAction,
    doAction,
    removeAction,
    removeAllActions
} = window.wkHooks;


export default window.wkHooks;

Create hooks and filters

In WordPress, do_action() and apply_filters() are the most commonly used functions for adding hooks to WordPress functions and plugins. Similarly, in JavaScript, the @wordpress/hooks package provides the applyFilters() and doAction() functions to create hooks.

applyFilters( 'hookName', content, arg1, arg2, moreArgs, finalArg );

doAction( 'hookName', arg1, arg2, moreArgs, finalArg );

import { Fragment, useEffect } from 'react';
import { applyFilters, doAction } from 'hooks.js';

const App = () => {


useEffect(() => {
        doAction('ACTION_ON_COMPONENT_MOUNT');
    }, []);


return (
        <Fragment>
            { applyFilters('BEFORE_APP_CONTENT', '')}
                    //app content
            { applyFilters('AFTER_APP_CONTENT', '')}
        </Fragment>
    )
};
export default App;

Use hooks and filters

In WordPress, add_action() and add_filter() are the most commonly used functions for adding hooks to WordPress functions and plugins. Similarly, in JavaScript, the @wordpress/hooks package provides the addFilter() and addAction() functions to use hooks.

addFilter( 'hookName', 'namespace', callback, priority );

addAction( 'hookName', 'namespace', callback, priority )

import { addAction, addFilter } from 'hooks.js';

addFilter('BEFORE_APP_CONTENT', 'custom', (content) => {

  return 'custom-content';

});



addAction('BEFORE_APP_CONTENT', 'custom', () => {
 
  // use custom functionality like call Apis etc.

});