How I published my first npm module

Publishing an npm module will be in the checklist of most budding javascript developers. After all, we would have used plenty of npm modules ourselves, saving us hundreds of development hours and making our lives much easier. It is only obvious for us to think about contributing back to the community we owe.

To be true, publishing one is relatively simple. But getting an idea for one, which could prove to be useful to the community (in theory at least ;) is relatively harder. There’ll already exist an npm module for most problems we could think of. In fact, like how apple trademarked “There’s an App for that™”, Npmjs could file a trademark for “There’s an npm module for that”.

Coming to the actual story… I was developing a react native application a few weeks back. I had to develop a custom component which would enable me to search a FlatList since there is no built-in support for search. Then, this idea of releasing it as an npm module was bugging me. Because finally, I had something which could be a little useful to someone facing a similar problem.

So, I started making the component much more generic and added support for SectionList as well. Then I began exploring ways of releasing the package.

The first step is to initialize an npm project using npm init and providing it with the necessary info.

The next step is to determine the modules which our package will be dependent on. In my case, it was just react and react-native. But since anybody who would be using this npm module would be doing so in their react-native project, they must already have react-native installed. So, these must be added to peerDependencies instead of dependencies. Apart from these, I didn’t have to use any other modules since the problem was relatively simple.

Then we would have to worry about versioning our modules so that we could release bug fixes, feature updates.. with ease. The standard is to follow semantic versioning.

The patch version must be incremented when doing a bug fix. Minor version when we do some minor feature enhancements without breaking the API. Major version change occurs when we do a** breaking change** to our module.

The next step is to organize our code. The entry point would be the one we specified in package.json. By default it’d be index.js. We could organize it in whichever way we find comfortable.

The final step is to prepare a useful README.md so that, people who actually would want to use our package fell at ease.

Once we have everything in place, we’ll have to check if our package really works. Since it's not published yet, we’ll have to test it by installing - giving it the file path instead of the name of the package. Something like npm install <file-path> would do the trick.

If everything works fine, we’re good enough to publish it to npm. It's as simple as npm login && npm publish if we have an account with npmjs already.

Here's the link of the modules in npmjs.

I also went a step ahead and created a react-native application that demonstrates the functionalities of this module. This application also helped me a lot in the documentation efforts.

Chandrasekar-G / RNSearchableListDemo

RNSearchableListDemo

A react native application to demonstarte the features of react-native-searchable-list

Here's the github Repo and the npm page

Setup

git clone https://github.com/Chandrasekar-G/RNSearchableListDemo.git
cd RNSearchableListDemo
react-native run-ios 

View on GitHub

TODO

1. I’ll have to write unit tests using jest. I began testing my components with jest snapshots. But I just wish to be sure so that I write unit tests actually solve to be useful instead of writing them for the sake of it.
2. Once jest tests are ready, add a CI preferably Travis.
3. Adding support for highlighting the text matching the search term.

Feel free to try out this module. Any constructive feedback/pull requests are
welcome :)

Chandrasekar-G / react-native-searchable-list

A Wrapper around FlatList and SectionList with search feature.

react-native-searchable-list

A powerful wrapper around React Native FlatList and SectionList to provide built in search feature react-native-searchable-list is designed to be simple yet a powerful wrapper around react native's FlatList and SectionList components to provide them with search functionality.

Installation

npm i react-native-searchable-list --save

1. SearchableFlatList

API

Props	Description	Data Type	isRequired
data	Data for the FlatList	Array	✅
searchTerm	Searching Term being input by the user. Typically this will be a state variable bound to a text input	String	✅
searchAttribute	Attribute to be searched in case of array of objects. This will be empty in case of a simple array data	String	❌
ignoreCase	Case sensitive / Case insensitive search. By default this will be set to true	Boolean	❌

By default the SearchableFlatList also inherits all the props of a React Native FlatList. You could use virtually any props you would with a FlatList.

Usage

import

…

View on GitHub

Comments

[Meghan (she/her)]

TIL npm install <file-path> exists

[Guillaume Martigny]

You can use npm link for the same result.