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.
;; /* mandatory */ { ; }; { return <div className="App"> <USAMap onClick=thismapHandler /> </div> ; } ;
Example with optional props, App.js
:
;; /* optional for styling like the :hover pseudo-class */; /* mandatory */ { ; }; /* optional customization of filling per state and calling custom callbacks per state */ { return "NJ": fill: "navy" console "NY": fill: "#CC0000" ; }; { return <div className="App"> <USAMap customize=this onClick=thismapHandler /> </div> ; } ;
App.css
:
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:
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.
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.