react-us-state-map

A React component that draws a map of US states plus DC as an SVG. It also provides an onClick event that fires when a state (or the District) is clicked, and passes in the state (or District) two-letter abbreviation.

Installation

npm i react-us-state-map

Usage

import USStateMap from 'react-us-state-map';

function handler(stateAbbreviation) {
  console.log(stateAbbreviation);
}

render() {
  return (
    <USStateMap onClick={handler} />
  );
}

Styling

The map is an SVG and can be mostly styled with SVG. There are lots of classes applied throughout the image to help with selecting precisely the element you want.

|CSS class|element|description| |---------|-------|-----------| |us-state-map|svg|The map image itself| |outlines|g|The container for the state shapes| |state|path|A state shape, but not DC| |state two-letter abbreviation, uppercase|path|For each state (and DC!), the state shape (same element as the one above) has its corresponding two-letter state abbreviation (in uppercase) as a class, so you can target a specific state with something like .us-state-map path.state.OH| |state|g|The container for the DC shapes| |DC1|path|Part of the DC shape| |DC2|circle|Another part of the DC shape| |frames|path|The framing lines around Alaska and Hawaii|

I'm not sure why DC is in two pieces. It's just a circle, not the actual shape of the District, but this way it's big enough to click.

License

The original code in this project is released under the MIT license.

The SVG map is modified from this original and is released under the Creative Commons Attribution-Share Alike 3.0 Unported.