Developing reusable react component will help our project development faster and also reduce the code. It also helps other peer react developers. To develop react component in Typescript way, will make NPM package more standardized. In this article, we will build a reusable component and also learn how to publish it to NPM registry.

Create Reusable React Component and Publish to NPM Registry

Developing reusable react component will help our project development faster and also reduce the code. It also helps other peer react developers. To develop react component in Typescript way, will make NPM package more standardized. In this article, we will build a reusable component and also learn how to publish it to NPM registry.
We will try to address common use case for an eCommerce site, where we have an add to cart button, by clicking on it, it will turn into increment or decrement buttons to increase or decrease the quantity. We will create this npm package and publish to the public npm js registry as well.
It is better to use webpack along with Typescript, so that code modularized and easy to distribute in the npm package. Instead of setting up, this react + typescript + webpack combinations, we can pick a boiler plate code from github and then quickly start working on it. I have choosen, this&nbsp;<a href="https://github.com/gapon2401/my-react-typescript-package.git" target="_blank" rel="noopener">my-react-typescript-package repo</a>.&nbsp;
<h3>Project Setup:</h3>
Lets do git clone of the boiler plate project , and remove the components folder, and modify index.tsx like below to render the react component. This is typical react index.tsx file to render the App component in the react root DOM.&nbsp;
<pre class="language-typescript"><code>import * as ReactDOM from "react-dom";
import App from "./App";
import AddToCart from "./AddToCart";
import React, { useRef } from "react";

export const AddToCartComponent = AddToCart;
ReactDOM.render(
 &lt;div&gt;
 &lt;h1&gt;Hello, Welcome to React and TypeScript&lt;/h1&gt;
 &lt;App /&gt;
 &lt;/div&gt;,
 document.getElementById("root"),
);
</code></pre>
&nbsp;
AddToCart component is created like React.FC i.e React.FunctionalComponent.&nbsp; React.FunctionalComponent is a simple javascript function; it accepts the data in the form of props and returns the react element. It takes the following props as inputs like:
Input Props Description
<div>
<div>
<pre class="language-typescript"><code>const cartProps = {
 title: "AddToCart", // button text 
 maxVal: 10, // maximum value this add to cart can be incremented.
 minVal: 0, // minimum value till which it can be decremented, then it will switch back to button. 
 initialVal: 2, // initialize value of the add to cart button to reload or preload with preset values. 
 ref: cartCountRef, // component reference object.
 };</code></pre>
</div>
</div>
&nbsp;
As we are using the Typescript, lets declare it as <code>CartBtnProps</code> type.&nbsp;
<pre class="language-typescript"><code>export type CartBtnProps = {
 title: string;
 minVal: number;
 initialVal: number;
 maxVal: number;
 ref: React.MutableRefObject&lt;any&gt;;
};
</code></pre>
&nbsp;
In the add to cart button, there are three button click event handlers to be added. One the initial add to cart button click event, next two are increment and decrement button click events. These three button events are for managing the quantity state variable i.e currVal. We can intialize the state variable to the props.initial value so that it preloads with desired value. If it is zero, we just show the add to cart button, otherwise it will show inc/dec buttons with text box. This we have done in the return statement.&nbsp;
Now the addToCart Button click will increment to the state variable as 1. For incrment button, we need to increment till we reach the maximum quantity. For decrement button, we need to decrement the quantity till we reach 1. Those are done in the below code snippet. Quantity show element is marked with reference element passed to the component.&nbsp;
<pre class="language-typescript"><code>import React, { forwardRef, useImperativeHandle } from "react";

export type CartBtnProps = {
 title: string;
 minVal: number;
 initialVal: number;
 maxVal: number;
 ref: React.MutableRefObject&lt;any&gt;;
};

const AddToCart: React.FC&lt;{
 cartBtnProps: CartBtnProps;
}&gt; = ({ cartBtnProps }) =&gt; {
 const [currVal, setCurrVal] = React.useState&lt;number&gt;(cartBtnProps.initialVal);
 const addToCartBtnClick = (
 e: React.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;,
 ) =&gt; {
 e.preventDefault();
 console.log("addToCartBtnClick");
 setCurrVal(1);
 };
 const increaseBtnClick = (
 e: React.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;,
 ) =&gt; {
 e.preventDefault();
 console.log("increaseBtnClick");
 setCurrVal(currVal &lt; cartBtnProps.maxVal ? currVal + 1 : currVal);
 };
 const decreaseBtnClick = (
 e: React.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;,
 ) =&gt; {
 e.preventDefault();
 console.log("decreaseBtnClick");
 if (currVal &gt; 0) {
 setCurrVal(currVal - 1);
 }
 };
 
 return (
 &lt;div&gt;
 {currVal &gt; 0 ? (
 &lt;div&gt;
 &lt;button onClick={increaseBtnClick}&gt;+&lt;/button&gt;
 &lt;span ref={cartBtnProps.ref}&gt;{currVal}&lt;/span&gt;
 &lt;button onClick={decreaseBtnClick}&gt;-&lt;/button&gt;
 &lt;/div&gt;
 ) : (
 &lt;div&gt;
 &lt;button onClick={addToCartBtnClick}&gt;{cartBtnProps.title}&lt;/button&gt;
 &lt;/div&gt;
 )}
 &lt;/div&gt;
 );
};

export default AddToCart;
</code></pre>
&nbsp;
Now we need to do a default export of this AddToCart react component. This can be invoked in App.tsx by passing the props value, its like a client to the react component.&nbsp;
We are just calling the AddToCart component call by passing all the props. You can see one more button below that, to get the current value of the quantity component. This get the value of the component and set to the state variable of App component.&nbsp;
<pre class="language-typescript"><code>import React, { useRef } from "react";
import AddToCart, { CartBtnProps } from "./AddToCart";

const App = () =&gt; {
 const cartCountRef: React.ForwardedRef&lt;any&gt; = useRef();
 const cartProps = {
 title: "AddToCart",
 maxVal: 10,
 minVal: 0,
 initialVal: 2,
 ref: cartCountRef,
 };
 const [showval, setShowval] = React.useState&lt;string&gt;("");
 const checkVal = (e: React.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;) =&gt; {
 e.preventDefault();
 console.log("check val", cartCountRef.current.outerText, cartCountRef);
 setShowval(cartCountRef.current.outerText);
 };
 return (
 &lt;div&gt;
 &lt;h1&gt;Hello, Welcome to React and TypeScript&lt;/h1&gt;
 &lt;AddToCart cartBtnProps={cartProps} /&gt;
 &lt;button onClick={checkVal}&gt;Check Value&lt;/button&gt;
 &lt;p&gt;{showval}&lt;/p&gt;
 &lt;/div&gt;
 );
};

export default App;
</code></pre>
&nbsp;
Please check the below demo video of how exactly it works.
<img src="https://assets.blackslate.io/posts/01/k8CD5arVrSen3ZR.gif" alt="Demo Video for Add To Cart" width="742" height="290">
&nbsp;
Now to build and publish the package, lets first export the component from here the index.tsx.
<pre class="language-typescript"><code>import AddToCart from "./AddToCart";
export const AddToCartComponent = AddToCart;</code></pre>
&nbsp;
To build the project and publish, have the following scripts.&nbsp;
<pre class="language-json"><code> "build": "npm run clean &amp;&amp; yarn build:esm &amp;&amp; yarn build:cjs",
 "build:esm": "tsc",
 "build:cjs": "tsc --module commonjs --outDir dist",
 "prepare": "npm run build",
 "prepublishOnly": "npm run prettier",</code></pre>
So when we run the project like <code>npm run build</code> will build the project webpack bundle. Next, we need to execute the command <code>npm run publish</code> it will publish the package to the npm registry.&nbsp;
Githu project repo is <a title="Add To Cart react repo link" href="https://github.com/devgroves/addtocartreactbtn" target="_blank" rel="noopener">available here</a>.&nbsp;
If we trouble using the component, please <a title="React Component Client" href="https://github.com/devgroves/reactcomponentclient" target="_blank" rel="noopener">check this project,</a> we have installed the package used that add to cart button.&nbsp;
Sample Code given for quick reference.&nbsp;
<pre class="language-javascript"><code>import logo from './logo.svg';
import './App.css';
import { LightBox } from "react-lightbox-pro";
import { AddToCartComponent } from "addtocart-react-component";
import React, { useState, useRef } from "react";

function App() {
 const [toggler, setToggler] = useState(false);
 const [currentSlide, setCurrentSlide] = useState(4);
 const [showval, setShowval] = useState("");
 const cartCountRef = useRef();
 const cartProps = {
 title: "AddToCart",
 maxVal: 10,
 minVal: 0,
 initialVal: 2,
 ref: cartCountRef,
 };
 const checkVal = (e) =&gt; {
 e.preventDefault();
 console.log("check val", cartCountRef.current.outerText, cartCountRef);
 setShowval(cartCountRef.current.outerText);
 };
 
 return (
 &lt;div className="App"&gt;
 &lt;button
 onClick={() =&gt; {
 setToggler(true);
 }}
 &gt;
 Click to Open LightBox
 &lt;/button&gt;
 
 &lt;br/&gt;
 &lt;br/&gt;
 &lt;br/&gt;
 &lt;br/&gt;
 &lt;h1&gt;Add To Cart Component&lt;/h1&gt;
 &lt;AddToCartComponent cartBtnProps={cartProps}/&gt;
 &lt;h6&gt;We can check Cart Value outside the component&lt;/h6&gt;
 &lt;button onClick={checkVal}&gt;Check Value&lt;/button&gt;
 &lt;p&gt;{showval}&lt;/p&gt;
 
 &lt;/div&gt;
 );
}

export default App;
</code></pre>
&nbsp;
<h3>Conclusion</h3>
In this article, we have learned how to build reusable react component and how to publish the library to NPM registry.

Newsletter

Related Articles

Suggested keywords:

Newsletter

Related Articles