Publishing React Components NPM Modules

Naturally we all progress on to greater things. Here at Points we started building our first new app in React.js, and are about to start our second. We anticipate that some of the components that we use in our first app will also be useful to have in our second app. To share code between these 2 apps we have decided to go the route of creating NPM modules, which makes it extremely easy to install in any app. I want to share with you what I’ve learned and any pain points I may have had in doing so.

Package.json

If you look at different npm repos, they look basically like a mini project. You have some build steps, a gulp or grunt file, a .git directory, and package.json. So where to begin?? NPM is pretty helpful answering this question. They have provided a nice terminal command

npm init

This leads you through the setup of your package.json file pretty quickly. I usually just do all the default values. After that you can start building up your component or npm project. Or in our case, just copying over existing component code, and creating a user friendly API.

Build step

In my attempt of creating an npm module, I wanted to keep it as lightweight as possible. So instead of using a build tool like Gulp/Grunt, I chose to use simple npm scripts. Setting one up is fairly straight forward.

In your package.json file you can add a new property, `scripts` as an object like below:

“scripts”: {
  "build": "rm -rf dist && node ./scripts/build-dist",
  "otherCmd": "more terminal commands..."
}

And the way you would execute one of these bad boys in the terminal would be:

npm run build

Something you might have not noticed in my above example is that you can use external node scripts. In my case, I have a node.js file in `./scripts/build-dist.js`. If you’re like me and lacking in the terminal commands department, I found writing node scripts to be far easier for more complicated instructions.

CSS

If you have a component you will probably have styles to go along with it. I’m not a huge fan of including css inside your jsx file, and would rather use scss. The way I tackled this problem is to force the consumer of my npm module to include my compiled css file or scss file, which has been working out well for us. If the consumer uses scss, they can actually easily configure and customize the npm component by overriding scss variables that we have clearly defined. If they are just using plain css, they will need to override the classes that we have, which will require them digging into the css file.

ES6

Here at Points we are big fans of ES6/7 and using new tools. I just wanted to share something that took me half a day to figure out. If you’re using Babel CLIwith React and jsx files, you’re going to need a .babelrc file, the babel configuration file. You will get errors compiling your jsx that look something like this:

SyntaxError: src/RangeSlider.jsx: Unexpected token (135:6)
  133 |
  134 | return (
> 135 | <div
      | ^

Babel won’t understand the html in your jsx file, and will barf at you. So the fix this you just need a .babelrc at the root of your file:

{
 “plugins”: [
 “transform-react-jsx”,
 “add-module-exports”
 ],
 “presets”: [“es2015”]
}

Readme.md

Probably the most important part of the NPM module is to include a README! No developer wants to dig into your code and figure out what’s going on. So document…The best NPM modules I’ve used are the ones where I just read the readme, and can plug and play in just a few minutes.

Examples also help greatly in understanding more complicated modules that have too many options and configurations than can be explained. Some people (me) don’t always want to read things twice, three times and not understand what you’re saying. Picture’s worth a thousand words.

Build for yourself

Going through this process has made me realize its not easy to account for every use case and every consumer out there. Everyone’s problems are different and everyone will want something to be tweaked. So to start, just start small. Your module should just address your concerns at first with a small set of configuration. It should do one thing very well instead of many things kind of ok. So open source and share the wealth, but be true to your needs.

Please check out our React components and let us know how to improve!

https://github.com/the-unsullied