React-usa-map-fc NPM

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

npm install react-usa-map-fc --save

Differences from Original Component

Written in Typescript as functional component.
Removed required onClick handler.
Added onClick and onClickEvent props that give you either the full event, or just the state abbreviation.
Corresponding onMouseOver and onMouseOverEvent 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.