Skip to content
This repository has been archived by the owner on Mar 30, 2021. It is now read-only.

React component that draws the US States + DC and offers a click event

License

Notifications You must be signed in to change notification settings

mgwalker/react-us-state-map

Repository files navigation

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.

About

React component that draws the US States + DC and offers a click event

Resources

License

Stars

Watchers

Forks

Packages

No packages published