CODEWITHSUNDEEP
javascriptreactjsecmascript-6material-ui
MisutoWolf
MisutoWolf

Reputation: 1233

Gathering Material-UI components in one file

I'm currently working on a Meteor project using Material UI and ReactJS.

What I'd like to do is have one file that imports all of the Material UI components I'm going to need for my project, then just import that single file where I need to use Material, instead of having to stick all of the individual exports at the top of every file.

Is this possible? I'm really new to ES6/2015 and the import/export system, but I wasn't sure if I could import all of said components then re-export them somehow?

I appreciate any assistance ahead of time. I guess this isn't exactly a critical part of my project by any means, but it certainly would be nice to be able to do.

Upvotes: 0

Views: 1658

Answers (1)

Larry Maccherone
Larry Maccherone

Reputation: 9523

Two options:

  1. You can import everything with import mui from 'material-ui'. Then access individual components with mui.Card, mui.CardActions, etc. This will make your application packages larger than they would be importing each component separately depending upon what portion of all components you are using but is the most convenient from a development perspective.

  2. Create a single file in your project where you import each component that you use individually, then export them all under a single namespace.

For example, in your common file, you would have lines like this:

import Card from 'material-ui/lib/card/card';
import CardActions from 'material-ui/lib/card/card-actions';
import CardHeader from 'material-ui/lib/card/card-header';
...

export default {
   Card, CardActions, CardHeader,...
}

Then you can import that file wholesale into each place where you need it. This will result in a package the same size as what you are doing now. It's less convenient than option 1 during development but still more convenient than having a separate list of imports in each of your own files.

Upvotes: 2

Related Questions