Packaging your React component

Before publishing anything to npm, the first step is to put your component files into a nice, clean package. I’ve created a template to make everything easier to follow, go ahead and download this first. And once you’re done, open the folder in your favorite code editor.

my favorite one is definitely Visual Studio Code

1. Adding your React component

The first thing you’re gonna wanna do is to move your React component files into the /src folder. For the purpose of this demonstration, I’ve created a component called MyCoolButton.js . Make sure to also include all the files that are required by your component. In this case, I‘ve also added in MyCoolButton.css .

Add your component files into /src folder

2. Sort out dependencies

The next thing you have to do is to figure out if your component requires any other dependencies. You can find that out by opening up your component file and check if it imports any other dependencies. In this case, my component requires the dependency prop-types .

MyCoolButton.js

Now let’s open up package.json , and add the dependencies in. Normally you would add your dependencies under dependencies , but in this case, you have to add them into peerDependencies and devDependencies . This is how your package.json should look like.

Notice that the list of dependencies is empty

After that, run npm install (or if you use yarn, yarn install ) to install the required dependencies.

3. webpack.config.js

Next up, we’ll use Webpack to bundle our React components into a nice CommonJS module. Click here to learn more about Webpack and what it does. Let’s start by opening up webpack.config.js .

This is the file that contains the different configurations that Webpack will use to bundle your React component. Here’s a description of the important settings:

entry — This refers to your React component. You should change it to the component that you’ve added in Step 1.

output — This specifies the path to the output file. You should update the filename to match your component’s file name.

module.rules — This is an array of rules that we are applying to our module. The first rule looks for any .js file and tries to transpile it using babel-loader . However, the second rule is only relevant if your component uses css . If your component uses any css , you will have to add this in. Click here to find out more about css-loader and style-loader .

Important Note If your component uses .sass or .scss , you would have to also include sass-loader by adding it to your Webpack module rules as well as adding it to your list of devDependencies in package.json . Click here to see a list of loaders that you might need to use.

I have only gone through the options that are relevant to this tutorial. Check out the full list of options here.

4. Bundle em’ up

Run npm run build (or if you use yarn, yarn build ). This should generate a folder called /lib which contains your freshly packaged component, in this case, MyCoolButton.js .

5. Test your component

Before you publish it to the world, it would make sense to take your package for a test drive first (or if you’re absolutely confident that it will work, feel free to skip ahead to Publishing To NPM).

Run npm pack . This will generate a .tgz file at the root directory.

Open up any React application that you want to test your new package, and then run npm install path_to_tgz_file . Replace path_to_tgz_file with your actual path.

In my case, the whole command looks like this: npm install /Users/Groftware/mycoolbutton/mycoolbutton-0.0.1.tgz .

The next thing you do is just import the component and use it normally

import React from 'react';

import MyCoolButton from 'mycoolbutton'; function App() {

return (

<div>

<MyCoolButton title="Click Me!"/>

<div>

)

} export default App;

Does it work? Great! Let’s move on to actually publishing it to the world.

Publishing to NPM

Alright so now you have your /lib folder with your newly packaged component ready to go, the next thing to do it just publishing it to npm.

Run npm login and login with your npm account. Create one here if you don’t already have one.