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.
yarn add usa-map-react
or
npm install usa-map-react --save
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;
}
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>
MIT.
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.