usa-map-react

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

Forked and refactored to use typescript from https://github.com/gabidavila/react-usa-map

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.

Installation

yarn add usa-map-react

or

npm install usa-map-react --save

Usage

The below example shows the mandatory onClick event.

import React from "react"
import { USAMap } from "usa-map-react"

const App = () => {
  /* mandatory */
  const mapHandler = (event) => {
    alert(event.target.dataset.name)
  }

  return (
    <div className="App">
      <USAMap onClick={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 "usa-map-react"

const App = () => {
  /* mandatory */
  const mapHandler = (event) => {
    alert(event.target.dataset.name)
  }

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

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

export default App

App.css:

path {
  pointer-events: all;
}
path:hover {
  opacity: 0.5;
  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
hideStateTitle	Optional prop to prevent state title from appearing on hover

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.