How to dynamically import a component in React?

Question

I am trying to optimize a component of mine with dynamic rendering, but I'm facing some issues, so this is my current situation:

I have an Alert component that renders an alert message, along with an icon.

I have a Icons module, which is a library of icons

I am currently rendering the icon as follows (this is not actual code, it's just to give the idea):

import * as icons from '../icons';
import DefaultIcon from '../icons';

function Alert(iconName='defaultIcon', message) {  

  function getIcon(iconName) {
    if (iconName === 'defaultIcon') {
      return DefaultIcon()
    }
    return icons[iconName]
  }

  return (
    <div>
      <span>{getIcon(iconName)}</span>
      <span>{message}</span>
    </div>

  )
}

So, suppose Alert gets called without iconName most of the times, so the components doesn't need to import all of the icons at all.

I would like to avoid including all of the icons in the Alert component by default, but only doing so if iconName is specified

Is it even possible to do so?

Lars · Accepted Answer · 2021-05-26 13:18:44Z

1

I don't think it's possible this way.

Maybe create a component for the Icon that imports the icon libary. In the Alert component you could implement the Icon component as a child:

<Alert message="Alert!">
  <Icon iconName="defaultIcon" />
</Alert>

answered May 26, 2021 at 13:18

Lars

961 silver badge5 bronze badges

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

Comments

hu7sy · Accepted Answer · 2021-05-26 13:23:38Z

1

You should import icons dynamically with type or name etc. something like below.

import React from 'react';

export default function Icon({ type, ...props }) {
  const Icon = require(`./icons/${type}`).default;

  return <Icon {...props} />
}

import Icon from './Icon';

<Icon type="addIcon" />

answered May 26, 2021 at 13:23

hu7sy

9813 gold badges15 silver badges54 bronze badges

Comments

Michael Vigato · Accepted Answer · 2021-05-26 15:11:44Z

0

Ok, looks like I managed, and that's how I did it:

import DefaultIcon from '../icons';

function Alert(message, iconName="") {
  const [icon, useIcon] = useState();

  //componentDidMount
  const useEffect(() => {
    //if an icon name is specified, import the icons
    if (iconName) {
      import("./icons").then(icons => setIcon(icons[iconName]))
    } else {
      setIcon(DefaultIcon)
    }
  }
  ,[])
  
  return (
    <span>{icon}</span>
    <span>{message}</span>
  )
}

answered May 26, 2021 at 15:11

Michael Vigato

3465 silver badges12 bronze badges

2 Comments

utopia Over a year ago

why "const useEffect" ?

Michael Vigato Over a year ago

silly mistake, ignore that const

Collectives™ on Stack Overflow

How to dynamically import a component in React?

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related