Export Multiple Components in Index File

Export Multiple Components
When I structure a React app, I'd like to put the components which are in the same category but with different styles in the same folder. Something like this:
/- components
    /- Card
        /- CardLeftMedia.js
        /- CardRightMedia.js
        /- CardTopMedia.js
So, I need to import & export them in a index.js file. Here's the simple solution:
// components/Card/index.js

export { default as CardLeftMedia } from "./CardLeftMedia";
export { default as CardRightMedia } from "./CardRightMedia";
export { default as CardTopMedia } from "./CardTopMedia";
They're named exports, and I import them with curly braces:
// pages/Home.js

import { CardLeftMedia } from "../components/Card";
Export One Component as Default
There's another scenario like this:
/- components
    /- Card
        /- Card.js
        /- Card.module.css
To export Card.js, I also add an index file:
// components/Card/index.js

export { default } import "./Card";
It's a default export and I could import it directly:
// pages/Home.js

import Card from "../components/Card";
More information about ES6 modules: ECMAScript 6 modules: the final syntax.

28

Categories:

JavascriptReact

Tags:

Es6ModuleJavascriptReact

This website collects cookies to deliver better user experience

Export Multiple Components in Index File