<h4>A full walkthrough on creating your very first React library and publishing it on npm.</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*JfzgCMz4CfaP9w9UvmwbEw.png"></figure><p><em>Originally published on my </em><a href="https://tomisin.dev/blog"><em>blog</em></a><em>.</em></p>
<p>For the sake of reusability, and to dodge the dangers of repetition, we in the field of Software Engineering, have had to extract some code out to modules and scripts, which we could so easily reference across several projects and implementation. The nature of ReactJS is no different — especially with the advent of Components.</p>
<p>In this article, we will be walking through creating a simple React library, testing it with a sample project, and then publishing it on npm.</p>
<h3>Step 1 — Initial Setup</h3>
<p>You’ll only need to do this step once. If you have already created an npm account, and you are currently logged in to npm on your terminal, feel free to skip this step.</p>
<h4>Create an npm Account</h4>
<p>To create an npm account, you need to head to <a href="https://www.npmjs.com/signup">npm’s Signup Page</a>.</p>
<h4>Login to npm on Your Terminal</h4>
<p>Next, open your favourite terminal, and type in the following command:</p>
<pre>npm login</pre>
<p>Or, you could also use this command if you wish:</p>
<pre>npm adduser</pre>
<p>Thereafter, you will be prompted for your username, password and email address. There’ll also be a one-time password required, if you opted in for two-factor authentication.</p>
<p>If you’re successfully logged in and setup, you should see something like this. Now, you are set to create the library we wish to share with the world, or perhaps reuse within our private projects.</p>
<h3>Step 2 — Create a New React Library</h3>
<p>To create a React library, you can do one of two things. You could either leverage the pre-existing create-react-library spec to initialise your library. Or, you could create a vanilla npm project and then, install all the typical dependencies we’ll need to build a React project.</p>
<p>In this article, we’ll be exploring the first option. Navigate to your working directory, and run the following command:</p>
<pre>npx create-react-library &lt;LIBRARY_NAME&gt;</pre>
<p>Alternatively, you use npm init.</p>
<pre>npm init react-library &lt;LIBRARY_NAME&gt;</pre>
<blockquote>Side note: npx create-&lt;spec-name&gt;is a shorthand which we could substitute for npm init &lt;spec-name&gt; — which is executed under-the-hood as npm exec create-&lt;spec-name&gt; (ex. npx create-react-app is the same as npm init react-app)</blockquote>
<p>You’ll get a number of prompts. Ensure you select the following when prompted, as the rest could be changed easily in package.json</p>
<ol>
<li>
<strong>Package Manager</strong> &gt; yarn</li>
<li>
<strong>Template</strong> &gt; typescript</li>
</ol>
<blockquote>Side note: yarn does make the work easier along the way. For one, it makes versioning easier.</blockquote>
<p>This may take a couple of minutes. After which you should have a project that looks something like this:</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/243/1*1MjrARgpknBx-08wI_RIDQ.png"></figure><h3>Step 3 — Write Your Custom npm Library</h3>
<p>In typical NodeJS fashion, you would be working inside of the src directory. So, open up the src directory, and you’ll find the index.tsx — which will be the API the user of the package will interact with.</p>
<p>In the index.tsx is where you want to export all the components, hooks and so on, which you want your user to implement.</p>
<p>While you make changes, it is important to have the package compiled and optimised — so that it’s possible to test it in a sample React project. In your terminal, run the following command:</p>
<pre>yarn start</pre>
<p>Now, as you make changes, your package will be built and compiled into your project’s dist directory.</p>
<h4>Testing your library</h4>
<p>For the sake of easy testing, there is a full-blown React project in the example directory. You will be using this React project to test the package you are working on.</p>
<p>The React project in the example directory is already linked with your new library in package.json (where your library is added as a dependency).</p>
<pre>cd example<br>yarn start</pre>
<p>If you get an error message with referencing your custom package, you could just add a reference to it in the dependencies object inside package.json by adding the following line:</p>
<pre>"sample": "link:.."</pre>
<h3>Step 4 — Publish Your npm Library</h3>
<p>When you’re happy with the work done so far, you can publish your library to the world (or your personal space).</p>
<h4>Publishing Your npm Library in a Private Feed</h4>
<p>If you are working on an npm library for your company’s internal use, or maybe you’re working on a library solely for your personal use, you can opt to leave it out of npm public directory, by using the command:</p>
<pre>yarn publish</pre>
<blockquote>Note that private libraries are a paid service offering by npm, and you’ll get an error message if you have not subscribed for it.</blockquote>
<h4>Publishing Your npm Library to the Public</h4>
<p>Alternatively, if you wish to share your library with the world, you could simply add an additional --access argument, as shown below.</p>
<pre>yarn publish --access=public</pre>
<p>You can use the same command to update your library, subsequently.</p>
<p>If you successfully publish your package, you’ll get this message.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/283/1*iXexih5PpjLM686LEWwRow.png"></figure><p>If you immediately try to install your library in your React app, and you get a 404 error, just wait a few minutes for your package to be fully available on npm, and try again.</p>
<p><em>There! You have your first React component live on npm. <br>Till next time, compadre!</em></p>

A full walkthrough on creating your very first React library and publishing it on npm.

Contents

javascript

npm

react

typescript

Publishing Your First React Library on npm

People also read