Change a Stateful React Class Component to a Function Component with the State Hook

Use the React Effect Hook in Function Components

Write a Custom State Hook in React

Write a Custom React Effect Hook

Extract a Custom Hook into its own Module with create-react-hook

Test your Custom Hook Module with react-hooks-testing-library

Prepare a Custom React Hook to be Published as an npm Package

Publish a Custom React Hook as an npm Package

Shareable Custom Hooks in React

The final step in our journey is publishing our custom hook as an npm package. In this video, we'll see how to login to the npm cli and publish our package to the npm registry. 

Instructor: [0:00] To publish our package on the npm registry, the first thing we're going to do is log in. We're going to run npm login. You'll need to log in with the credentials from your npm registry account. If you don't have one, you can go to npmjs.com and click on join to create a free account.

[0:16] You want to type in your username, your password, and your email that's associated with your account. If all is successful, you'll see logged in as your username on registry.npmjs.org. Since we already have the prepared scripts in place, we don't need to run yarn build because npm will automatically run it when we run npm publish.

[0:36] Now what we'll do is run npm publish. You'll see that it's automatically found our prepared script. I'll fast forward through this. You'll notice that it ran our post publish git push --tags. Great. Now if we head over to the npm website, click on your avatar, click on packages, you should see your package. There it is, published a few seconds ago.

[0:59] Just like we said in the last video, what we see here is generated from the README. It has a link to the repository and it will show your avatar under collaborators. That's all you need to do to publish your custom React hook as an npm package.

Course

Shareable Custom Hooks in React

Publish a Custom React Hook as an npm Package

Share this video with your friends