react-usa-map | A simple SVG USA map rendering on React

This is an alternate version for you that just want a simple customizable map on HTML. This maps shows states delimitations including DC, Alaska, and Hawaii. D3 is not needed.

It uses the Albers projection.

Live Example

Live: http://react-usa-map-demo.herokuapp.com

Code: http://github.com/gabidavila/react-usa-map-demo

Installation

It requires react React 16.8.0 or higher. Run:

yarn add react-usa-map

or

npm install react-usa-map --save

Usage

The below example shows the mandatory onClick event.

import React, { Component } from 'react';
import USAMap from "react-usa-map";

class App extends Component {
  /* mandatory */
  mapHandler = (event) => {
    alert(event.target.dataset.name);
  };

  render() {
    return (
      <div className="App">
        <USAMap onClick={this.mapHandler} />
      </div>
    );
  }
}

export default App;

Example with optional props, App.js:

import React, { Component } from 'react';
import './App.css'; /* optional for styling like the :hover pseudo-class */
import USAMap from "react-usa-map";

class App extends Component {
  /* mandatory */
  mapHandler = (event) => {
    alert(event.target.dataset.name);
  };

  /* optional customization of filling per state and calling custom callbacks per state */
  statesCustomConfig = () => {
    return {
      "NJ": {
        fill: "navy",
        clickHandler: (event) => console.log('Custom handler for NJ', event.target.dataset)
      },
      "NY": {
        fill: "#CC0000"
      }
    };
  };

  render() {
    return (
      <div className="App">
        <USAMap customize={this.statesCustomConfig()} onClick={this.mapHandler} />
      </div>
    );
  }
}

export default App;

App.css:

path {
  pointer-events: all;
}
path:hover {
  opacity: 0.50;
  cursor: pointer;
}

All optional props:

|prop|description| |----|-----------| |title| Content for the Title attribute on the svg| |width| The width for rendering, numeric, no px suffix| |height| The height for rendering, numeric, no px suffix| |defaultFill| The default color for filling| |customize| Optional customization of filling per state |

Additionally each path tag has an abbreviation of the current state followed by a state class:

<path fill="#{custom color or #D3D3D3}" data-name="CA" class="CA state" d="...{polygon dimensions here}..."></path>

License

MIT.

Sources

The map is sourced from Wikimedia and is under Creative Commons Attribution-Share Alike 3.0 Unported license. This package is inspired on the react-us-state-map package, in fact the initial SVG class system is based on it.

Contributing

Fork and PR. Not much fuss, I will be try to be as responsive as possible.

Maintainer

Package maintaned by Gabriela D'Ávila Ferrara, website.