- 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.
I am working on a project which may or may not go much further. I am building a Rails back-end and playing with React + Redux for the front-end.
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.
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 back-end and front-end 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 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.
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
However they don’t have a
create-react-component. Since I am just now going in this front-end 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 and other necessary actions such as adding tags, 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.
You can install using:
yarn add react-usa-map
npm install react-usa-map --save
It uses React 15.4.2 as minimum requirement and it is compatible with React 16.0.0.
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