Export multiple components from a file in React.js

Export multiple components from a file in React.js #

Use named exports to export multiple components in React, e.g. export function A() {} and export function B() {}. The exported components can be imported by using a named import as import {A, B} from './another-file'. You can have as many named exports as necessary in a single file.

Here is an example of exporting multiple components from a file called Buttons.js.

Copied!
// 👇️ named export
export function SmallButton() {
  return <button>Small</button>;
}

// 👇️ named export
export function BigButton() {
  return <button style={{padding: '20px 40px'}}>Big</button>;
}

Note that using export on the same line as the function's definition is the same as exporting the components as an object after they have been declared.

Copied!
function SmallButton() {
  return <button>Small</button>;
}

function BigButton() {
  return <button style={{padding: '20px 40px'}}>Big</button>;
}

// 👇️ named exports
export {SmallButton, BigButton};

Either of the 2 approaches can be used when exporting class components, e.g. export class A{}.

Here is how we would import the components in a file called App.js.

Copied!
// 👇️ named imports
import {SmallButton, BigButton} from './Buttons';

export default function App() {
  return (
    <div>
      <SmallButton />
      <BigButton />
    </div>
  );
}

Make sure to correct the path that points to the Buttons.js module if you have to. The example above assumes that Buttons.js and App.js are located in the same directory.

For example, if you were importing from one directory up, you would do import {SmallButton, BigButton} from '../Buttons'.

The import/export syntax is called ES6 Modules in JavaScript.

The example above uses named exports and named imports.

The main difference between named and default exports and imports is - you can have multiple named exports per file, but you can only have a single default export.

If you try to use multiple default exports in a single file, you would get an error.

Copied!
// ⛔️ Only one default export allowed per module.
export default function SmallButton() {
  return <button>Small</button>;
}

const BigButton = () => {
  return <button style={{padding: '20px 40px'}}>Big</button>;
}

export default BigButton;

IMPORTANT: If you are exporting a variable (or an arrow function) as a default export, you have to declare it on 1 line and export it on the next. You can't declare and default export a variable on the same line.

Let's look at an example that exports multiple components and uses both - default and named exports.

Copied!
// 👇️ default export
export default function SmallButton() {
  return <button>Small</button>;
}

// 👇️ named export
export const BigButton = () => {
  return <button style={{padding: '20px 40px'}}>Big</button>;
};

And here is how you would import the two components.

Copied!
// 👇️ default and named imports
import SmallButton, {BigButton} from './Buttons';

export default function App() {
  return (
    <div>
      <SmallButton />
      <BigButton />
    </div>
  );
}

Notice that we didn't wrap the default import in curly braces.

We used a default import to import the SmallButton component and a named import to import the BigButton component.

Note that you can only have a single default export per file, but you can have as many named exports as necessary.

You also don't have to think about which members are exported with a default or named export.