Export multiple Functions or Components from file in React
# Export multiple functions or components from a file in React
Use named exports to export multiple functions in React, e.g.export function A() {} and export function B() {}.
The exported components can be imported by using a named import asimport {A, B} from './another-file'. You can have as many named exports asnecessary in a single file.
Here is an example of exporting multiple functions from a file calledButtons.js.
Buttons.js
Copied!
// 👇️ named exportexport function SmallButton() { return <button>Small</button>;}// 👇️ named exportexport function BigButton() { return <button style={{padding: '20px 40px'}}>Big</button>;}
The code for this article is available on GitHub
Note that using export on the same line as the function's definition is thesame as exporting the components as an object after they have been declared.
Buttons.js
Copied!
function SmallButton() { return <button>Small</button>;}function BigButton() { return <button style={{padding: '20px 40px'}}>Big</button>;}// 👇️ named exportsexport {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.
App.js
Copied!
// 👇️ named importsimport {SmallButton, BigButton} from './Buttons';export default function App() { return ( <div> <SmallButton /> <BigButton /> </div> );}
The code for this article is available on GitHub
Make sure to correct the path that points to the Buttons.js module if you haveto.
The example above assumes that Buttons.js and App.js are located in the samedirectory.
For example, if you were importing from one directory up, you would doimport {SmallButton, BigButton} from '../Buttons'.
We wrapped the names of the functional components in curly braces when importing them - this is called a named import.
The import/export syntax is calledES6 Modules in JavaScript.
In order to be able to import a function from a different file, it has to be exported using a named or default export.
The example above uses named exports and named imports.
The main difference between named and default exports and imports is that youcan have multiple named exports per file, but you can only have a single defaultexport.
# You can't use multiple default exports in a single file
If you try to use multiple default exports in a single file, you would get anerror.
Buttons.js
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;
The code for this article is available on GitHub
IMPORTANT: If you are exporting a variable (or an arrow function) as adefault export, you have to declare it on 1 line and export it on the next. Youcan't declare and default export a variable on the same line.
Having said that you can use 1 default export and as many named exports as youneed in a single file.
# Using a default and a named export
Let's look at an example that exports multiple components and uses both -default and named exports.
Button.js
Copied!
// 👇️ default exportexport default function SmallButton() { return <button>Small</button>;}// 👇️ named exportexport const BigButton = () => { return <button style={{padding: '20px 40px'}}>Big</button>;};
And, here is how you would import the two components.
App.js
Copied!
// 👇️ default and named importsimport SmallButton, {BigButton} from './Buttons';export default function App() { return ( <div> <SmallButton /> <hr /> <BigButton /> </div> );}
The code for this article is available on GitHub
Notice that we didn't wrap the default import in curly braces.
We used a default import to import the SmallButton component and a namedimport to import the BigButton component.
Note that you can only have a single default export per file, but you can haveas many named exports as necessary.
In my experience, most real-world codebases exclusively use named exports and imports because they make it easier to leverage your IDE for auto-completion and auto-imports.
You also don't have to think about which members are exported with default ornamed export.
# Additional Resources
You can learn more about the related topics by checking out the followingtutorials:
- Using import aliases when importing Components in React
- Attempted import error 'X' is not exported from [Solved]
- You are importing createRoot from 'react-dom' which is not supported
- You attempted to import X which falls outside of the project
- React: Could not find a required file. Name: index.html
