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, Hawaii and Alaska. D3 is not needed.

Live Example

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

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

Installation

It requires react 15.4.2 or higher, compatible with React 16.0.0. Run:

yarn add react-usa-map

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 & Sources

This project is license is MIT, for more information please refer to license.

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.

GrokInteractive/react-usa-map