Create and Publish NPM Package for custom Hooks in React JS

This article will walk you through how you can create and publish your own NPM package for custom Hooks in React Js.

The main aim of this article is to learn how to create your own NPM package and Publish it to NPM registry where all the packages are hosted. We are not going to create a high end package but after reading and implementing things explained in this article, you are good to create real world and managed NPM package for using it in your React Application.

Prerequisites

• Node.js installed on your local machine. If not installed, use this link to download & install it.
• Have a account created on NPM Registry. If not already, use this link to sign-up.
• Git version control tool installed on your local machine. (Optional)

Initial Setup

Create a Folder for your project and Run below command.
npm init

Enter all required information and press Enter. This will create a Package.json in your directory.

Install Required Packages

Now we need to add dependencies related to our package. Obviously we are create a React Custom Hook, we will need react and react-dom packages. So lets install it or you can manually add packages inside package.json.
npm install react react-dom

Note: When we install package using above command our dependencies get added under dependencies. As above dependencies are mandatory and required to be installed before our package installation in any project, we need to rename it as peerDependencies. This means we should have these dependencies installed before installing our custom hook package.

modified package.json will look like:

Writing The Code

Now we will create one js file named as use-react-toggle.js inside our directory and note that we have mentioned entry point as use-react-toggle.js in package.json. If you have multiple js files, good practice is, you should create index.js as a entry point and import all files inside index.js.

But in our case, we are just creating a simple Hook, so we will need a single js file.

We are creating a hook which will used to toggle state of the button as Active and Inactive. Also we will have functionality to pass default state inside hook.

Lets create our custom Hook.

import React, { useState } from "react";

function useReactToggle(active = false) {
  const [isActive, setIsActive] = useState(active);
  return [isActive, setIsActive];
}

export default useReactToggle;

Publish To The NPM Repository

Now Login to npm repository using below command:
npm login
Enter Username, Password and email id.

Now to Publish your package enter below command:

npm publish

After successful execution of above command, you will able to see package get publish on NPM repository and also, you will receive email regarding publish status of your package.

Test Your Package In React JS Application

Create a simple react application and install your package using npm command.

npx create-react-app test-application
Install our custom hook package.

npm i use-react-toggle
And, Finally import our custom hook in App.js Component.

import logo from "./logo.svg";
import "./App.css";
import useReactToggle from "use-react-toggle";

function App() {
  const [IsOn, setIsOn] = useReactToggle(true);
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <button
          style={{ width: "300px", height: "60px" }}
          onClick={() => setIsOn((IsOn) => !IsOn)}
        >
          State: {`${IsOn}`}
        </button>
      </header>
    </div>
  );
}

export default App;

Start Project and check behavior of Button:

npm start

Toggle Button is working as expected !! 🎉

Great!😍, we have successfully created and published our first React Custom Plugin and used in another project.

Please do share your feedback and experiences with NPM package publication in the comments section below. I’d love to see what you come up with!

If you found this article useful, please share it with your friends and colleagues!❤️

Follow me on ⤵️
🌐 LinkedIn