How to Publish a Custom React Hook as an NPM Library

[00:00 - 00:10] In the previous modules, we added a commenting system to a sample block application. But what if we have multiple applications that we want to add comments to?

[00:11 - 00:20] We would need to copy paste the hook to different projects. However, we can also publish the hook as an NPM library and import it to any project.

[00:21 - 00:30] That's what we'll do in this lesson and it's going to only take a few steps. To deploy our hook as an NPM package, we need to use a bundler.

[00:31 - 00:45] Module bundler is a tool that bundles JavaScript or TypeScript modules into a single JavaScript file that can be executed in the browser. We're going to use Micro Bundle, which is a zero configuration bundler for tiny modules.

[00:46 - 00:58] It comes with TypeScript support out of the box and it's pretty straightforward to set up. We can install it with the following comment. Before we use it, let's fill a few things in the package JSON.

[00:59 - 01:09] We need to add the name and set it to how we want our library to be called. I will propend it with my NPM username, but feel free to use whatever name you wish.

[01:10 - 01:19] Then source, we need to point where is the source code. Then we have main, the location where Micro Bundle should generate the command JS bundle.

[01:20 - 01:27] Types, TypeScript Types location. Micro Bundle will generate types from our module and put them there.

[01:28 - 01:35] The next thing is module. The location where the ESM bundle should be placed. Files, files that should be included in the package.

[01:36 - 01:48] We want to ignore all the block application code and only include our hook code . We also need to set a version for our package and then set private to false so that we are able to publish the library.

[01:49 - 02:03] Since we are publishing the package from the same place where we have the block application, we will add a separate TS config specifically for the library. It will extend our main config and add a few more options.

[02:04 - 02:19] The first one is out there in compiler options. We will set it to this and we will also add include key and we will set it to the use command source code. Then we will add a new script to the package JSON that will compare the source code to this directory.

[02:20 - 02:28] We will call Micro Bundle without compressing and we will pass our newly created TS config. Now we can try and run it with the following command.

[02:29 - 02:39] Yarn built Micro Bundle. You should see the similar output. If you want to use the use commands in an application, it needs to have React installed.

[02:40 - 02:49] However, we don't want to install React along with the hook installation. Instead, we need a way to say that it only works if there is a React dependency .

[02:50 - 03:01] We can do it by specifying the pure dependencies in package JSON. By that, we are saying that the coded install's our package must have React in version 16.8 or greater.

[03:02 - 03:14] If you don't have an npm account, you can create one on an npm website. After creating the account, you can log into npm via the command line with npm login command.

[03:15 - 03:24] Then it will ask you to provide your credentials as your username and password. To make sure that you are logged in correctly, you can run npm who am I.

[03:25 - 03:36] After completing the steps, we are ready to publish the package with this single command such as npm publish. After running this command, you can check your npm account and see if the package is there.

[03:37 - 03:46] You can now use the use commands hook from the newly published library. I promise that it will only be a few steps and I hope that it all went smoothly for you.

[03:47 - 03:54] In the next lesson, we'll look into one more hook customization. We'll make commands to require manual approval.