How to Build a React TypeScript Component Library and Publish on npm

We’ll then set up the development environment using npm, where I'll show you how to create a simple npm package, install TypeScript and React, and understand the different types of dependencies, such as dev dependencies and peer dependencies. I’ll walk you through creating a custom TypeScript configuration file to define how your TypeScript code is compiled into JavaScript.

Next, we'll create and test a React component as part of your library, where you'll learn how to set up Jest for testing your components and configure it to work seamlessly with TypeScript. I’ll demonstrate how to run tests in a JSDOM environment to ensure your React components are functioning as expected.

We’ll also dive into the importance of conventional commit messages and how they help maintain a clear and understandable commit history in your project. You’ll learn how to enforce these conventions using tools like commitlint and Husky, ensuring that every commit in your project follows the best practices.

As we move forward, I’ll show you how to build your React TypeScript Component Library for both ECMAScript and CommonJS modules, keeping your builds clean by excluding unnecessary files. I’ll guide you through testing your unpublished package locally using npm link, ensuring everything works perfectly before it goes live.

By the end of this video, you’ll have a fully functional React TypeScript Component Library ready to be shared with the developer community. If you find this video helpful, don't forget to like, share, and subscribe for more content on React, TypeScript, and web development.

Timestamp -
00:00 Intro
00:38 NPM/NVM & Semantic Versioning
07:42 Environment Setup for React TypeScript Library
14:04 Creating and Testing React Component
25:15 Conventional Commit Messages & CommonJs and ECMAScription Builds
34:04 Testing module before publishing to NPM
43:37 Publishing Library to NPM

[FrontendNerd-lgoh]

THis is going in my resume, thanks
looking forward to part 2

[BodyBuilder-ek]

I have tried in my local and published it but after installing in test project getting error like, Cannot read the properties of null ( reading useContext ).
But believe me there is no useContext used in my project.

After that i installed other react component libraries from npmjs but they are also giving same issue, even after installing all peer and dependencies. Any solution for this ?