In this article, I will go through the entire process of creating a reusable component and publishing it on npm for other developers to use.
This article assumes that you already have a component to publish but if you don't then just create a simple button component or something to test your understanding once you finish reading this. I have tried to keep this article easy to follow for beginners with less technical jargons to help you quickly launch your package so let's get started.
Firstly, what is a reusable component?
I will use an interesting analogy to make sure you never have to look up for its definition again.
Imagine a pond of water with a caretaker whose only job is to help people catch fishes easily from the pond or dump their wastes into it. A reusable component is just like that pond and the caretaker is our props, the fishes coming out of the pond or the waste going into it is the data that we pass or fetch using props. That's it.
Now I will take you through the steps involved in this whole process. These are the steps that I created for myself while planning for the project and I urge everyone working on their projects to first think about the whole process and break it down into small steps because that will help you measure your progress as well as boost your morale as you move forward. I consider programming as no less than a battlefield and it is very easy to drop your weapons and surrender here when things get rough, especially when you are a beginner. That's why having checkpoints in your path is important. Let's move onto the steps now:
Creating the component:
The first part is to actually write the code for the component and test it out. My first npm package was a simple drag and drop component and since it was not a lot of work as I just needed few event listeners to listen for drag and drop event and then callbacks to handle those events, I went ahead to write a sample code with codesandbox. It is a great tool if you want to avoid the hassle of creating react boilerplates just to create and test a simple component. But if you want to use your code editor from the beginning then I would need you to first create a react boilerplate then a folder named "component" in the src directory and put your component code in it. Then clean your parent component (the app.js file in src) and import the component you created. Check if it is working as expected.
Passing data:
The next step was to think about how I would receive some data from the user. I am sure you already know how to do that. Yes, I am talking about props but we don't simply use that here as we do normally in our projects. We first import a package called prop-types to declare the types of props that will be passed in our component. Here is how I used it in my component to give you an idea.
If you are familiar with typescript then you might already understand what I did here. Typechecking your props like this makes sure that only the data-type you declared can be passed as props else will throw an error in the developer's console.
This is helpful because suppose you built a big and complex library but those who are using it in their projects don't know the data-type they are supposed to pass as props and hence might pass the wrong ones making your library to behave unexpectedly while they won't know what they did wrong (Example- Your library expected a string as props but received an object instead). Here's a great article if you're interested to learn more about prop-types.
Fetching data:
Now comes the third part which is fetching data from the library i.e. returning some data to the user. In my drag and drop files, I had to return the dropped files and believe me, despite being so simple, it took me a while to realize because I thought there might be some other magic trick to do that but there wasn't. I just had to pass a callback as props to my component the way we normally do anywhere in react which will carry the data back to the parent. simple, right? So if you scroll back to the code in the image above, you'll see that I am receiving a callback as a prop named getFiles for the same. One more thing, that isRequired at the end in our propTypes is added to indicate that without passing that prop, our component won't work as expected. There are other props that are passed as optional in which case, you don't need to add isRequired in the end when declaring their types.
Publishing the component:
The last step is to actually minify the code to publish but since I had little idea about webpack or anything, I followed this article by Chan. It gives you a boilerplate with all the fine tuning already done to the files to publish on npm. Just replace the src files with yours, change the project name in package.json and webpack, create a build and publish it. Volla! easy peasy. I know you might be wondering, "But this is like a shortcut, where are the detailed steps for publishing?" and you are right but my friend if you're publishing a package or building any new kind of project for the first time then your primary goal should be just completing it as soon as you can. Remember I earlier mentioned that programming is no less than a battlefield and in a battlefield, winning with minimum casualties is the primary goal. And that was our motive too in this article, to complete and publish our library without dying i.e. losing motivation in the middle. You can always go and dive deep into publishing a package or what goes under the hood when npm publishes our package? how does webpack work? etc. But for now, this is enough.
And if you continued this far then here is a bonus. In the image I shared above, you will see I imported something called useDropy but what is that? They are called custom hooks in React (give yourselves a pat on your back if you already knew). Let me explain what this is with a simple example. Take any of your component files and instead of returning the JSX at the end, return some value like you do in a normal JavaScript function and that's it, that has now become a custom hook which can be imported anywhere in your project to fetch that data being returned. In react's language,
Building your own Hooks lets you extract component logic into reusable functions.
That can save you from the pain of prop-drilling and will help you keep your code clean. You can read more about them here.
To checkout my first drag and drop library that I published on npm, click here.
I hope you liked the article, wish you all the best.
