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 16.13.1 or higher. Run:

yarn add react-usa-map

or

npm install react-usa-map --save

Usage

The below example shows the mandatory onClick event.

``javascript
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 (


);
}
}

export default App;
`

Example with optional props, App.js:

`javascript
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 (


);
}
}

export default App;
`

App.css:

`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:

`html

``

License

MIT.

Sources

The map is sourced from Wikimedia.svg) 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.