# 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.
    

```javascript
// 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:

```javascript
// 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:

```bash
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.

```bash
{
  "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.

```bash
{
  "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.

```bash
npm run build
```

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

```bash
npm link
```

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

```bash
npm link profile-abbr
```

### Using the Library

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

```bash
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:

```bash
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!