The hook is cleanly implemented, well documented, and contains a variety of above-and-beyond features that make the developer experience of using the hook a pleasure. It's time to finally publish the hook to npm! Leveraging npm's scoped package ability, you should be able to publish your own version of the hook under the same name, 

. To get started, you'll need an npm account. If you don't have one, you can sign up at 

 account, publish this version under your alternate account.

 that helps manage multiple npm accounts. This tool is called 

 and can be installed globally with the following command:

First, ensure you are on the correct npm account using 

, you should be all set, but if you want to use a different account, run the following command:

Also, make sure you are logged in with this user:

This will likely prompt you through the login process if you haven't issued it before or in a long time. The prompts might look something like this:

npm notice Log in on https://registry.npmjs.org/
Username: fullstackcraftllc
Password: 
Email: (this IS public) hi@fullstackcraft.com
npm notice Please check the email for a one-time password (OTP)
Enter one-time password: 04518224
Logged in as fullstackcraftllc to scope @fullstackcraftllc on https://registry.npmjs.org/

As one final check, rebuild the hook to be sure it is ready to publish:

---
title: Publish the Hook to npm
code: https://gitlab.com/fullstackio/books/react-use-please-stay-with-react-and-typescript/-/blob/production/course/code/lesson-17
isPublicLesson: true
useMdx: true
privateVideoUrl: https://stream.mux.com/zVqXmlQzv8GqO932gKrc02n004IMb3trPIYAh4xFtKX2Q.m3u8
---

The hook is cleanly implemented, well documented, and contains a variety of above-and-beyond features that make the developer experience of using the hook a pleasure. It's time to finally publish the hook to npm! Leveraging npm's scoped package ability, you should be able to publish your own version of the hook under the same name, `react-use-please-stay`. To get started, you'll need an npm account. If you don't have one, you can sign up at [npmjs.com/signup](https://www.npmjs.com/signup).

Since `react-use-please-stay` has already been published under the `princefishthrower` account, publish this version under your alternate account.

## Prepare Package for Publishing

To get started, install a helpful tool `npmrc` that helps manage multiple npm accounts. This tool is called `npmrc` and can be installed globally with the following command:

```shell
npm install -g npmrc
```

First, ensure you are on the correct npm account using `npmrc`.

```shell
npmrc <npm user name>
```

If you've already been using `npmrc`, you should be all set, but if you want to use a different account, run the following command:

```shell
npmrc -c <other npm user name>
```

Also, make sure you are logged in with this user:

```shell
npm login
```

This will likely prompt you through the login process if you haven't issued it before or in a long time. The prompts might look something like this:

Chris Frewin

Publish the Hook to npm

Our hook is cleanly implemented, well documented, and contains a variety of

that make the developer experience of using our hook a pleasure.

It's time we finally publish our hook to NPM.

We'll leverage NPM's scoped package ability, so each of us will be able to

under the same name React Use Please Stay.

To get started, you'll need an NPM account.

If you don't have one, you can sign up at npmjs.com/signup.

Since I've already published React Use Please Stay under my Prince Fish Thrower

I'll be publishing this version under my alternate account, FullstackCraft LLC.

To get started, we'll install a helpful tool, NPMRC, that helps us manage

And we can ensure that we are on the correct NPM account by calling NPMRC with

Like I said, I'll be using my FullstackCraft LLC account.

And as it turns out, I'm already on this account with NPMRC.

If you've already been using NPMRC, then you're all set.

If you want to use a different account, we can issue NPMRC-C.

And just as an example, I'll switch to my Prince Fish Thrower account and back

Let's also make sure that we're logged into NPM with this user so we can issue

Then I'll provide my FullstackCraft LLC user and my password, my email.

And if you have two-factor authentication, you'll also need to provide the OTP

And if everything went okay, NPM will tell you that you're logged in, and we

Just to be safe, let's rebuild our hook one last time, NPM run build,

and we should set the scope of our package to our desired user.

So while we previously just had the name React use please stay, we should

And so I'm going to add the @ symbol and my account name, FullstackCraft LLC,

With that small change, we're ready to publish our package.

To do so, we'll use the NPM publish command.

And if you want your package to be public, you can pass the access flag with

And as soon as this command completes, your package should be available on NPM.

You can verify this by checking NPMJS.com/package and then slash this name.

So for me, the full URL would be NPMJS.com/package and then, FullstackCraft LLC

And checking this out in the browser, by default NPM will show the read me on

And we can see all the changes we've made to our read me there.

The only small change here is that I already previously published a 1.0.0 and N

So I simply bump the minor version here, but yours is likely 1.0.0.

And as another double check to really see if our package is on the NPM registry

We can unlink our React use please stay package.

And we'll install our very own package that we just published. In my case, it

will be the full stack craft LLC, React use please stay package.

So we installed just as we would any other package.

And if we check the package.json in our example application, we do see indeed

And the version I have, which I just mentioned is 1.0.1 was installed.

And in app.tsx, we have to add the namespace to the package.

And we can check that even when installed from NPM, our hook should work as

And of course, we get the same functionality we do as if it was installed

So well done. You've published your first React hook NPM package.

In summary, we first set up NPMRC to manage multiple NPM accounts.

We set our NPMRC to use the user account we want.

We updated the root package.json name to our very own scoped name using the @

We logged into NPM via the command line. We built our hook as a final double

That's all for module three. In the next and final module, we'll transform the

existing example app into a fully fledged example page that developers can use

as a live example to experiment with the hook.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript