react-usa-map-fc | A simple SVG USA map rendering on React
NOTE: This is based on Gabi Davila's original implementation in class-based React Javascript. I've converted it to a functional component and used Typescript. I've kept some of the original documentation.
Original: https://github.com/gabidavila/react-usa-map
Installation
It requires react
16.13.1 or higher. Run:
yarn add react-usa-map-fc
or
npm install react-usa-map-fc --save
Differences from Original Component
- Written in Typescript as functional component.
- Removed required onClick handler.
- Added
onClick
andonClickEvent
props that give you either the full event, or just the state abbreviation. - Corresponding
onMouseOver
andonMouseOverEvent
handlers added (optional as well). - Removed per-state handlers in the
customize
object. Didn't see a strong use case. - Default export removed.
Usage
import React, { useState } from 'react';
import {Container, Row, Col, Alert } from 'react-bootstrap';
import {MapCustomizations, USAMap} from 'react-usa-map-fc';
function App() {
const [ customize, setCustomize ] = useState<MapCustomizations>({});
const mapClickHandler = (state: string) => {
console.log(`clicked ${state}`);
setCustomize({ ...customize, [state]: { fill: '#00ff00'}});
}
const mapFlyoverHandler = (state: string) => {
console.log(`mouse entered ${state}`);
setCustomize({ ...customize, [state]: { fill: '#0095ff'}});
}
const mapClickEventHandler = (event: React.MouseEvent<SVGPathElement>) => {
// if some typings whiz knows a better way, lemme know!
const dataset = (event.target as SVGPathElement).dataset as MapMouseEventDataset;
console.log(dataset);
}
return (
<Container>
<Row className="mt-5">
<Col/>
<Col lg={8}>
<Alert variant="info">react-usa-map-fc</Alert>
<div>
<USAMap
onClick={mapClickHandler}
onClickEvent={mapClickEventHandler}
onMouseOver={mapFlyoverHandler}
customize={customize}
width={800}/>
</div>
</Col>
<Col/>
</Row>
</Container>
);
}
export default App;
Props
prop | description | required | default |
---|---|---|---|
title |
Content for the Title attribute on the map svg
|
No | 'USA Map' |
width |
The width for rendering, numeric, no px suffix |
No | 960 |
height |
The height for rendering, numeric, no px suffix |
No | 600 |
defaultFill |
The default color for filling. | No | '#d3d3d3' |
customize |
Optional customization map for state fill colors. See below. | No | undefined |
onClick |
Callback for clicking on a state. (stateAbbreviation: string) => void . This callback gives you just the abbreviation as a string. |
No | undefined |
onClickEvent |
Event callback for clicking on a state. (event: MouseEvent<SVGPathElement>) => void . Returns the full event. See example code below for unpacking. |
No | undefined |
onMouseOver |
Same signature as onClick above. |
No | undefined |
onMouseOverEvent |
Same signature as onClickEvent
|
No | undefined |
As type defintions:
export type MapCustomizationOption = {
fill?: string;
}
export type MapCustomizations = Record<string, MapCustomizationOption>;
type MapProps = {
onClick?: (stateAbbrev: string) => void;
onClickEvent?: (event: MouseEvent<SVGPathElement>) => void;
onMouseOver?: (stateAbbrev: string) => void;
onMouseOverEvent?: (event: MouseEvent<SVGPathElement>) => void;
width?: number;
height?: number;
title?: string;
defaultFill?: string;
customize?: MapCustomizations;
}
Per State Fill Customization
To customize the fill for a state, add an entry in the customize
map like so:
const customizedStates = { 'CA': { fill: '#00ff00' }, 'NJ': { fill: '#a0c3d4} };
Type definition is above.
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. Then lemme know.
Maintainer
Package maintained by Mitch Kahn, website.