React USA Map: A package for customizing the USA map without D3.md

React USA Map: A package for customizing the USA map without D3

TL;DR;

• I created a React package called react-usa-map
• It displays the USA map with the states including DC / Hawaii / Alaska
• It's MIT license
• Install instructions on The Package section of this post.

Package origins

I am working on a project. I don't know if this is going further or not. The fact is I am doing Rails in the backend and playing with React + Redux for the front-end.

This project demands me to have the an USA States map and to be possible to customize the colors and callback on the event for "onClick" in the state.

I decided to create a React component because said map will be used in more than one place in my project. I tried D3. It's good, really good, but I needed something simpler. I have three weeks to do this project and between programming backend and frontend alone I don't have the time to do the perfect Chropleth map as much as I want to. It is a "nice to have" in my project, not a "must have". Maybe after the three weeks I will open source it first I need to check if I can legally open source the project since I am getting the data from a 3rd party.

After finding this map on wikimedia through the react-us-state-map package on npmjs.org I thought: this is a cool idea, to have the map as an SVG and then change the filling as I want it.

The first step for the package

I extracted the dimensions out of the <svg> and put in a JSON to be read by the component.

The second step

Facebook created this really cool thing for React: create-react-app. It allows you to have a boilerplate code for your react application without actually have to worry how to transpile your code for ECMAScript 2015 and configure webpack.

However they don't have a create-react-package or create-react-component. Since I am just now going in this frontend adventure, I did what other developer would do in my place: I googled and found this repo.

The third step

I did some modifications on the package.json removing packages I wasn't using to customizing the tags and other necessary actions such as adding tags, adding scripts, etc.

The final step

Publishing to NPM is actually simple:

Once logged in the terminal run:

$ npm version 1.0.0 # your version number here
$ npm publish

After this I created a demo project to see if my map would work as intended.

The package

You can install using:

yarn add react-usa-map

or

npm install react-usa-map --save

react-usa-map started with only me as a contributor, and since the release people contributed adding tests, continuous integration and new features.

• Live Demo: http://react-usa-map-demo.herokuapp.com - It's on Heroku free tier, so latency may be an issue if the demo is not being accessed often enough
• Code: http://github.com/gabidavila/react-usa-map-demo
• Contributors: https://github.com/gabidavila/react-usa-map/graphs/contributors

Suggestions:

I am working on a project which may or may not go much further. I am building a Rails backend and playing with React + Redux for the front-end.

Then

This project requires me to have a map of US States and for it to be possible to customize the colors and add an "onClick" event for each state.

And

Maybe after the end of the project I will open source it. I do need to check if I can legally open source the project since I am getting the data from a 3rd party with tight licensing requirements.

Otherwise looks quite good!!!