How to set up a directory as a "module" for bulk JavaScript import?

Question

Just like we'd do import * as React from 'react'; and then for example const [state, setState] = React.useState(false);

I would like to import a bunch of my exported stuff from a folder to then access using dot-notation of the imported module.

For example, an "AppBar" component using "AppsButton", "HomeButton", "BugReportButton" and "HelpButton", which I put as jsx files in the same folder. These files each "export default" functions for their views. I would like to do:

 import AppBar from '@mui/material/AppBar'; import * as AppBarContent from ".//AppBar"; // hopefully the correct syntax for the folder named "AppBar", which this file sits in

and then use each component in the view like:

 <AppBar> <AppBarContent.AppsButton /> <AppBarContent.HomeButton /> <AppBarContent.BugReportButton /> <AppBarContent.HelpButton /> </AppBar>

I looked about and found this resource , but wasn't certain it's the same thing I'm after and when I made the suggested index.js with the following content it didn't change anything (I could've done it wrong).

index.js:

 exports.AppsButton = require("./AppsButton"); exports.HomeButton = require("./HomeButton"); exports.BugReportButton = require("./BugReportButton"); exports.HelpButton = require("./HelpButton"); exports.HelpDrawer = require("./HelpDrawer");

Any single resource or some steps how to achieve this please?

Answer 1

You cannot have more than one default export in one file. Use named exports as follows:

appbar.js:

export const BugReport = () => <div> bug </div>
export const Header = () => <div> header </div>
export const Footer = () => <div> Footer </div>

Then you can import and use them as follows:

header.js

import React from "react";
import * as Appbar from "./appbar";

function Header(props) {
  return (
      <div>
        <Appbar.BugReport/>
        <Appbar.Footer/>
        <Appbar.Header/>
      </div>
  );
}

export default Header;

Answer 2

I actually found the solution to this when checking out some coding standards for React:

One point says "Create a index.js within each folder for exporting". Source: https://www.jondjones.com/frontend/react/react-tutorials/react-coding-standards-and-practices-to-level-up-your-code/

After I've added an index.js to each folder that imports all components in that folder and then exports them all, I can import individual components from that folder level as a "module" (apologies if terminology incorrect) and also import all as a named source that I can access using dot notation. Note that for this to work the imports (of indexed exports) must now include curly braces.

For example all the buttons going into a new folder "buttons" and having an index.js :

 import AppsButton from "./AppsButton"; import HomeButton from "./HomeButton"; import AppHomeButton from "./AppHomeButton"; import HelpButton from "./HelpButton"; export {AppsButton, HomeButton, AppHomeButton, HelpButton}

Then the AppBar.js a folder up can do either:

 import {AppsButton, HomeButton, AppHomeButton, HelpButton} from "./buttons"

with

 <AppBar> <AppsButton /> <HomeButton /> <BugReportButton /> <HelpButton /> </AppBar>

or:

 import * as buttons from "./buttons"

with:

 <AppBar> <buttons.AppsButton /> <buttons.HomeButton /> <buttons.BugReportButton /> <buttons.HelpButton /> </AppBar>

(I went for the former in this case, but I can see now how in other areas of my code-base I could have things like appBarContent.buttons.AppsButton reused elsewhere using this approach...)