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
Top comments (2)
I feel like there should be a testing step prior to publishing to NPM. Once it’s there, that’s PROD. Perhaps use Verdaccio as a dev npm server or refer to this article for other ideas.
dev.to/vcarl/testing-npm-packages-...
Thanks for sharing