how to dynamically import a react component and call it?

Question

I have a react component that contains an SVG image. and i import it like this

import MessageIcon from '../static/styles/svg/messageIcon';

However as part of code splitting, i want to dynamically import it instead of static import.

I tried like this but does not work

import('../static/styles/svg/messageIcon').then(MessageIcon => { return <MessageIcon /> });

can anyone tell me how i can dynamically import and call this component? thanks in advance

ijavad · Accepted Answer · 2023-01-09 09:15:08Z

1

You can import dynamical like this :

import React, { useEffect, useState } from "react";

const App = () => {
    const [state, setState] = useState<any>();

    useEffect(() => {
        (async () => {
            const i = await import("../../assets/img/user.svg");
            setState(i);
        })();
    }, []);
    
    return <img alt={"test dynamic"} src={state?.default} />;
};
export default App;

Also, you can write it with ref too:

    import React, { useEffect, useRef } from "react";

    const App = () => {
        const ref = useRef<any>();

        useEffect(() => {
            (async () => {
                const i = await import("../../assets/img/user.svg");
                ref.current.src = i.default;
            })();
        }, []);
        
        return <img alt={"test dynamic"} ref={ref} />;
    };
    export default App;

import dynamical React component

import React from "react";

const App = () => {
      const nameIcon = "iconMessage";
      const IconMessage = React.lazy(() => import(/* webpackChunkName: "icon" */ `./${nameIcon}`));

      return <IconMessage />;
};
export default App;

edited Jan 9, 2023 at 9:15

answered Jan 6, 2023 at 5:57

ijavad

1962 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ebin Thomas Over a year ago

Thanks ijavad for the reply. I understood your solution. But in my case, the SVG itself a react component. import MessageIcon from '../static/styles/svg/messageIcon'; the above 'MessageIcon' is a react component which I need to dynamically import and call

ijavad Over a year ago

oh sorry dude it is my mistake I didn't see it a component react, so you can use React lazy, I will update this Awnser

Collectives™ on Stack Overflow

how to dynamically import a react component and call it?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related