At my previous company, I was chatting with a coworker about getting more into open source. I told him I wanted to release an open source npm package. He suggested I try it with a custom React hook/effect I had written the month prior. It had the purpose of closing a dropdown menu or container when you clicked outside of it.

Together, we ambitiously tackled the goal and released a package called react-use-click-away 🎉 It isn’t a perfect package but it gave us that experience we were longing for.

While figuring out how to do all this, I realized it felt more intimidating than it should have. To solve that, I’m going to show you all the things you need to know in order to release your own custom React component, hook or effect as an npm package 😎 Let’s do it!

Things You Should Know

Before we jump in, there are a few things I want to make sure we define. Some things on which you might need a refresher:

What is a React component?

> Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen. - Official React docs

What is a React hook?

> Hooks are functions that let you “hook into” React state and lifecycle features from function components. - Official React docs

What is a React effect?

> The Effect Hook, useEffect, adds the ability to perform side effects from a function component. - Official React docs

Now that all the bases are covered, let’s move forward assuming you have basic React experience and experience with Hooks. - Intro to React Hooks Tutorial

Tutorial Prerequisites

As with any coding tutorial, we must make sure your machine has what it needs to accomplish the task. You should have the following installed on your computer or laptop:

Once you have all of that, you are ready to go!

Set Up Boilerplate using create-react-hook

create-react-hook is a “CLI for easily creating reusable react hooks..” This came as a recommendation from Dominik Kundel who has spent a lot of time releasing npm packages. It’s been great so far and will make this process much easier.