event after dynamic component loaded

Unanswered

Common carp posted this in #help-forum

Common carpOP

2024-06-27T18:23:53.912Z

I’m using a 3rd party component that I need to load with ‘dynamic()’ and am trying to run some client side JS after the component is loaded and in the DOM. Is there a good way of tapping into that event?

5 Replies

James4u

2024-06-27T20:29:39.075Z

@Common carp you can!

const DynamicComponent = dynamic(() => import('./YourComponent'), { ssr: false });

const Page = () => {
    const componentRef = useRef(null);

    useEffect(() => {
        if (componentRef.current) {
            console.log('Dynamic component has been loaded and is in the DOM');
        }
    }, [componentRef.current]);

    return (
        <div>
            <DynamicComponent ref={componentRef} />
        </div>
    );
};

export default Page;

import React, { forwardRef } from 'react';

const YourComponent = forwardRef((props, ref) => {
    // you can put third party component here
    return <div ref={ref}>This is your component</div>;
});

export default YourComponent;

Try these out and let me know if you have any trouble