How to build and publish an NPM package for React using Typescript?

In development, creating and distributing reusable components is essential for building scalable and maintainable applications. With the popularity of TypeScript and React, you can easily package and share your components as NPM packages. This tutorial will teach us how to create and release our NPM packages (NPM modules).

Prerequisites:

• GitHub Account
• NPM Account
• Knowledge of React and TypeScript

What is NPM?

NPM, short for Node Package Manager, is the default package manager for NodeJS. It is a command-line utility that allows you to install, manage, and share packages or modules of JavaScript code. These packages can range from small utility libraries to large frameworks, and they can be easily integrated into Node projects to extend their functionality.

NPM packages offer numerous advantages, a few of which are outlined below:

• Reusable code
• Code management (with versioning)
• distributing code

What is Typescript

TypeScript is a strict superset of JavaScript, which means anything that is implemented in JavaScript can be implemented using TypeScript along with the choice of adding enhanced features. It is an Open Source Object Oriented programming language and strongly typed language.

Steps to build NPM Package:-

Step 1: Open the GitHub account and create new empty repository and give the name stringToLower then click on create repository button.

Step 2:- Then go to the code editor(VS Code) and Open the terminal and create new empty folder and then open it.

mkdir stringToLower

Step 3: Open this folder terminal and initialize the git repository

git init
git remote add origin https://github.com/YourRepo.git
git remote -v

Step 4:-Go to code editor, create README.md file in the folder and open terminal and check the status of the git repository

git status

Step 5:- write something your Readme file and push into the GitHub repository by using the following command.

git add .
git commit -m 'Initial'
git push -u origin master

Step 6:- initialize the project using this command :- npm init -y and then go to package.json file and give the keywords and the author name and change licencse type ISC to MIT.

Step 7:- Create a file .gitignore and add node_modules in it.

Step 8: Install typescript using the following command and Create a folder src and inside it create a file index.ts

npm install -D typescript

Step 9:- For the configuration of TypeScript create a file tsconfig.json. then give some congiguration code like this:

{
    "compilerOptions": {
        "target": "ES5",
        "module": "CommonJS",
        "declaration": true,
        "outDir": "./lib",
        "strict": true
    },
    "include": ["src"],
    "exclude": ["node_modules","**/__tests__/*"]
}

Step 10:- Add the following code in src/index.ts file

//src/index.ts

export class StringtoLowercase{
    
    static ToLower(stringName:string) {
         let lower = "";
        for (var i = 0; i < stringName.length; i++) {
            var value = stringName.charCodeAt(i);
            if (value >= 65 && value <= 90) {
                lower += String.fromCharCode(value + 32);
            }
            else {
                lower += stringName[i];
            }
        }
        console.log(lower);
    }
}

Step 11:- Modify the package.json file.

1. In script object change the "test" to "build" and give the value "tsc".

2. Save the file and build the project with the following command:

npm run build

3. It will create a lib folder and inside the lib folder two file like index.d.ts and index.js will be created.

4. Go to .gitignore file and add lib folder which which will not be pushed to GitHub repository.

5. Go to package.json file and add the file object.

6. Update the entry point of file and types.

7. Check the git status (using this command: "git status") and push this code in GitHub repository by following the step5.

Steps to Publish NPM Package:-

Step 1:- Create the NPM account and go to profile and click on package button(If there is any package it will show otherwise no package found message will show )

Step 2:- Then go to vs code terminal and login with npm using the following command.

npm login 

Step 3: Check that you are login successfully or not using the following command.

npm whoami

Step 4: In the terminal, write the command to publish your npm package

npm publish

Step 5: Go to npm.com and go to packages you will find your published package.