2017-23 @ Fabio Franchino

Create a React reusable components library using Microbundle

Posted on December 17, 2021 in
3 min read

In this exploration I'm showing how to turn a regular React app into a reusable React components library with Microbundle.

Microbundle is a zero-config tool based on Rollup to build a bundle without messing with the Rollup config.

Create the library app

Let's create the app that will contains all your components using CRA:

npx create-react-app mylib

And add some components in the components folder, such as:

// src/components/sub/A.js

export const A = () => {
    return (
        <h1>A</h1>
    )
}

// src/components/sub/B.js

export const B = () => {
    return (
        <h1>B</h1>
    )
}

and

// src/components/MainComp.js

import { A } from './sub/A'
import { B } from './sub/B'

export const MainComp = () => {

    return (
        <>
            <h1>MainComp</h1>
            <A />
            <B />
        </>
    )
}

Tha above components can be tested in the App.js:

import { MainComp } from './components/MainComp'

function App() {
  return (
    <div>
      <MainComp />
    </div>
  );
}

export default App

Install and configure Microbundle

Install it the usual way:

npm i -D microbundle

and configure the package.json file adding the module type we want to use:

"main": "./dist/lib.umd.js",
"module": "./dist/lib.module.js",

The file where we define the exported components:

"source": "src/lib.package.js"

And the script to build the library:

"scripts": {
  ...
    "build:lib": "microbundle --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react"
}

The above config options are required in order to make the library compatible with jsx syntax.

Finally, let's define the exported components in lib.package.js:

export { MainComp } from './components/MainComp.js'
export { A } from './components/sub/A.js'
export { B } from './components/sub/B.js'

Run the build command and move to the App where you want to include the library:

npm run build:lib

Include the library into a React App

Suppose we have a React app created with CRA. To install the library locally without publish it to NPM registry, just use this command:

npm i file:../mylib

where mylib is the folder name of the above library that sits alongside the React app.

Now, let's import our reusable components in App.js:

import { MainComp, A, B } from 'mylib'

function App() {
  return (
    <div className="App">
      
      <div style={{border:'1px solid red'}}>
        <MainComp />
      </div>
      
      <div style={{border:'1px solid blue'}}>
        <A />
      </div>
      
      <div style={{border:'1px solid green'}}>
        <B />
      </div>
      
    </div>
  );
}

export default App;

Here the rendered page:

That's all!

← I brutally eradicated js from my blog for fun and profit
How to make a Meme-like text style in HTML and CSS →