I am trying to use @wordpress/hooks package in one of my react based plugin. I have added some hooks(filters/actions) and I need to hook into these from different plugin.

I am able to add filter for applied filters within same plugin reactJs file but not working when added from different plugin.

Here is code from main plugin -

import React from 'react';
import { Component } from '@wordpress/element';
import { applyFilters } from '@wordpress/hooks';
import { addFilter } from '@wordpress/hooks';
import { useFilters } from '@woocommerce/components';

export const TEST_FILTER = 'wk_test_filter';

// addFilter( TEST_FILTER, 'plugin-domain', title => {
//  return `Added to ${title}`;
// } );

export const titleFilter = applyFilters( TEST_FILTER, 'Default text' );

class App extends Component {
    constructor( props ) {
        super( props );

    render() {
        return (
                <h1>{ titleFilter }</h1>

export default useFilters( TEST_FILTER )(App);

The commented code in above snippet is working fine but when I add the same filter from different react based plugin then it is not working anymore.

Source URL

  • 1
    It's a bit difficult to say what might be going on. One idea that comes to my mind is that applyFilters is running before addFilter, so when it tries to apply the filter it's not created yet. I would check the order plugins are loaded or, even better, the order the two function calls are made (a console.log before each one should help). – Aljullu Nov 20 '19 at 19:28
  • Thank you @Aljullu for your help. I was doing in the same way to addFilter before applyFilter but it wasn't working somehow. I have tried again and it is working fine now. – Varun Kumar Nov 26 '19 at 6:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.