Export import in reactjs

Question

Say I have class Panels and class Panel in my ui. I want to avoid multiple statements such as import Panel.. and import Panels ... every time I decide to use them.

Instead, I want to re-export Panel from Panels once, and in my app just say something like import * from 'Panels.js' causing both Panel and Panels appear in the scope of my App.

Is this possible? Good tutorial on the subject? thanks.

You can add the javascript tag to the question, it's relevant — Dekel
– Dekel, Commented Aug 17, 2017 at 21:22

Dekel · Accepted Answer · 2017-08-17 21:16:34Z

2

You can use import * as Panels from 'Panels';

Inside your code you should use Panels.Panel and Panels.Panels

Don't forget that you need to export both in order to import them

answered Aug 17, 2017 at 21:16

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

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

Comments

jonahe · Accepted Answer · 2017-08-17 21:19:28Z

1

You can import several things from the same module like so:

import { Thing1 , Thing2 } from "module-name";

Or import everything like so:

import * as everything from "module-name";

For all other variations see: https://developer.mozilla.org/sv-SE/docs/Web/JavaScript/Reference/Statements/import

answered Aug 17, 2017 at 21:19

jonahe

5,0101 gold badge17 silver badges20 bronze badges

1 Comment

juanecabellob Over a year ago

it is important to note that the first option uses ES6 feature destructuring

Collectives™ on Stack Overflow

Export import in reactjs

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related