Creating an npm Library Using React.js

In this article, we'll walk through the process of creating an npm library using React.js. Our goal is to build a small, reusable library called "profile-abbr", which will display an abbreviated profile name component.

To get started, follow these steps:

1. Create a New React Application: Begin by setting up a new React application. If you’re starting from scratch, you can use Create React App to quickly setup the project. Once your application is ready, navigate to the src folder and delete all its contents to start with a clean slate.

2. Set Up the Library Folder: Inside the src directory, create a new folder named ProfileAbbr. This is where we’ll store our library code.

3. Create the Entry Point: Inside the ProfileAbbr folder, create a new file called index.js. This will serve as the entry point for your library.

4. Write the Code: Now, let’s write some code for the library. Make sure to import React at the top of the file.

// index.js
import React from "react";

function ProfileAbbr({ name, count }) {
  const profileAbbr = (name, count) => {
    const words = name.split(" ");
    let result = "";
    for (let word of words) {
      if (result.length < count) {
        result += word.charAt(0).toUpperCase();
      } else {
        break;
      }
    }
    return result;
  };

  return (
    <div className="App">
      <h3>{profileAbbr(name, count)}</h3>
    </div>
  );
}

export default ProfileAbbr;

After setting up the ProfileAbbr folder and creating the index.js file, create a new index.js file inside the src folder. Add the following code:

// index.js
import ProfileAbbr from "./ProfileAbbr";
export default ProfileAbbr;

Next, we need to add the necessary dependencies to build our code. Run the following command to install the required packages:

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react

Now, let's create a Babel configuration file. In the root of your project, create a .babelrc file to specify the necessary presets for compiling React code.

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

Finally, let's update the package.json file. This will include the necessary scripts and dependencies to build and run the library.

{
  "name": "profile-abbr",
  "version": "0.1.0",
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "main": "dist/index.js",
  "module": "dist/index.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "babel src -d dist",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.25.9",
    "@babel/preset-env": "^7.26.0",
    "@babel/preset-react": "^7.25.9"
  }
}

Next, we need to build our code before using it. Run the following command in the terminal to bundle the code. A dist folder will be created containing the bundled code.

npm run build

Now, let's test the library locally using npm link. In the library's root directory, run the following command:

npm link

In the test project’s root directory, run the following command:

npm link profile-abbr

Using the Library

Now, let's see how we can use the library we created in a project.

import ProfileAbbr from "profile-abbr";

function App() {
  return (
    <div className="App">
      <ProfileAbbr name={"Alice Bob"} count={2} />
    </div>
  );
}

export default App;

Finally, let's publish the library to npm. Run the following commands to publish your package:

npm adduser
npm publish

Conclusion

You've successfully created and published an npm library using React.js. Now you can share your reusable components with the community and continue building more powerful libraries. Happy coding!