Dynamic import files with React

Question

I am creating an animations using Adobe After Effects and React Lottie and I have many json files generated by Bodymovin extension. I am importing files in that way:

import * as initial from './white_bird.json';
import * as hoverOn from './white_bird_hover_on.json';
import * as hoverOff from './white_bird_hover_off.json';

But, when I have e.g. 6 other components that look identically but differ from each other only with imported files. How can I write those lines upper in something like this:

const data = {
    initial: import * as initial(`./${some_param}.json`),
  };

Note that I must import it like '* as' in another way this doesn't work

Possibly import files with js and inject the contents to where you need it. — lehm.ro, Jan 21 '20 at 09:52

Fraction · Accepted Answer · 2020-01-21T15:00:45.300

7

You could use Dynamic import:

useEffect(() => {
  async loadData() {
    const data = await import(`./${some_param}.json`);
    setInitial(data);
  }

  loadData();
}, [])

and use Promise.all if you have multiple requests:

useEffect(() => {
  async loadData() {
    const [initalData, hoverOnData, hoverOffData] = await Promise.all([
      import(`./${bird}.json`),
      import(`./${bird}_hover_on.json`),
      import(`./${bird}_hover_off.json`)
    ]);

    setInitial(initalData);
    setHoverOn(hoverOnData);
    setHoverOff(hoverOffData);
  }

  loadData();
}, [])

edited Jan 21 '20 at 15:00

answered Jan 21 '20 at 09:57

Fraction

11,668
5
28
48

It only works with import * as variable_name without * as is not working – Freestyle09 Jan 21 '20 at 10:02

score 0 · Answer 2 · answered Jan 21 '20 at 14:49

I found a solution, import returns a Promise and later I can easily set my data from file to state and now it works perfect.

const [initial, setInitial] = useState(null);
const [hoverOn, setHoverOn] = useState(null);
const [hoverOff, setHoverOff] = useState(null);

  useEffect(() => {
    import(`./${bird}.json`).then(data => setInitial(data));
    import(`./${bird}_hover_on.json`).then(data => setHoverOn(data));
    import(`./${bird}_hover_off.json`).then(data => setHoverOff(data));
  }, []);

Dynamic import files with React

2 Answers2