How to use hooks create from @wordpress/hooks between multiple react application

Hi @varun286. Let’s see if I understand your question so far:

– you are wanting to know more about how the @wordpress/hooks package works.
– you understand it involves filters and actions.
– you are unclear how to implement them.

Is this pretty much accurate so far? If so, let me clarify a few things:

This package doesn’t have any react dependency. The various interfaces exposed on that package can be used in any javascript environment.

Given the above, it sounds like you are having trouble with something specific in using the interfaces. Can you elaborate on what exactly you have tried and what isn’t working for you? Maybe that can help someone in the forums point you in the right direction for resolving your specific use-case?

Hi @nerrad
Thanks for the reply.

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 js 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 <code>Added to ${title}</code>;
// } );

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

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

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

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.

Regards

Usually what you are describing happens because of script loading order. You have to make sure the script in your other plugin loads _before_ the apply_filters is invoked in your component.

Hi @nerrad Thank you. It works.