Borislav Hadzhiev
Sat Apr 30 2022·3 min read
Photo by Ivana Cajina
Use named exports to export multiple functions in React, e.g.
export function A() {}
and export function B() {}
. The exported functions
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 functions from a file called
Boxes.js
.
// 👇️ named export export function SmallBox() { return ( <div style={{ backgroundColor: 'salmon', color: 'white', height: '100px', width: '100px', }} > Small Box </div> ); } // 👇️ named export export const BigBox = () => { return ( <div style={{ padding: '30px', backgroundColor: 'lime', color: 'white', height: '200px', width: '200px', }} > Big Box </div> ); };
Note that using the export
keyword on the same line as the function's
definition is the same as exporting the functions as an object after they have
been declared.
function SmallBox() { return ( <div style={{ backgroundColor: 'salmon', color: 'white', height: '100px', width: '100px', }} > Small Box </div> ); } const BigBox = () => { return ( <div style={{ padding: '30px', backgroundColor: 'lime', color: 'white', height: '200px', width: '200px', }} > Big Box </div> ); }; // 👇️ named exports export {SmallBox, BigBox};
Here is how we would import the functions in a file called App.js
.
import {SmallBox, BigBox} from './Boxes'; export default function App() { return ( <div> <SmallBox /> <BigBox /> </div> ); }
Make sure to correct the path that points to the Boxes.js
module if you have
to. The example above assumes that Boxes.js
and App.js
are located in the
same directory.
For example, if you were importing from one directory up, you would do
import {SmallBox, BigBox} from '../Boxes'
.
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.
export default function SmallBox() { return ( <div style={{ backgroundColor: 'salmon', color: 'white', height: '100px', width: '100px', }} > Small Box </div> ); } const BigBox = () => { return ( <div style={{ padding: '30px', backgroundColor: 'lime', color: 'white', height: '200px', width: '200px', }} > Big Box </div> ); }; // ⛔️ Parsing error: Only one default export allowed per module. export default BigBox
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.
1
default export and as many named exports as you need in a single file.Let's look at an example that exports multiple functions and uses both - default and named exports.
// 👇️ default export export default function SmallBox() { return ( <div style={{ backgroundColor: 'salmon', color: 'white', height: '100px', width: '100px', }} > Small Box </div> ); } // 👇️ named export export const BigBox = () => { return ( <div style={{ padding: '30px', backgroundColor: 'lime', color: 'white', height: '200px', width: '200px', }} > Big Box </div> ); };
And here is how you would import the two functions.
// 👇️ default and named imports import SmallBox, {BigBox} from './Boxes'; export default function App() { return ( <div> <SmallBox /> <BigBox /> </div> ); }
Notice that we didn't wrap the default import in curly braces.
We used a default import to import the SmallBox
function and a named import to
import the BigBox
function.
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.