Support » Developing with WordPress » How to use hooks create from @wordpress/hooks between multiple react application

  • Hi,

    I would like to know about @wordpress/hooks use. As using this package we can add hooks for filters and actions. These added hooks can be used within same react application. But, how to use these hooks from different react applications.

    Any kind of information regarding above will be appreciated.

    Thanks & Regards

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • 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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.