Dynamic import base on props name in react

Question

import { a, b, c } from 'some-package/theme' // should not import everything here

const MyComp = ({ theme, ...other }) => { 

  console.log(theme) //can be a, b, c, d, e etc
  return(<MyCompInner />) 
}

export default MyComp

How can I do dynamic import from 'some-package/theme' ? the prop of theme can be a, b, c and more. Theme props is the option, but I have to import the value from 'some-package/theme' before I supply it to <MyCompInner />

Chris · Accepted Answer · 2018-05-17 08:29:50Z

4

You could use require() for this. Unlike import which has to be at the top, you can use require() anywhere in your code.

const MyComp = ({ theme, ...other }) => { 

  const t = require('some-package/theme/' + theme);
  return(<MyCompInner theme={t} />) 
}

export default MyComp

edited May 17, 2018 at 8:29

answered May 17, 2018 at 8:21

Chris

59.7k20 gold badges121 silver badges144 bronze badges

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

3 Comments

user9728810 Over a year ago

can't do import here? why require would work? Is that a apart of jsx?

Chris Over a year ago

@Melissa92, not entirely sure, but probably some kind of restriction in the bundling process.

user9728810 Over a year ago

yeah thanks so much for this!! Although enyzme test won't let that to work.

Collectives™ on Stack Overflow

Dynamic import base on props name in react

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related