usa-map-react

    0.1.4 • Public • Published

    usa-map-react | A simple SVG USA map rendering on React

    Forked and refactored to use typescript from https://github.com/gabidavila/react-usa-map

    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.

    Installation

    yarn add usa-map-react

    or

    npm install usa-map-react --save

    Usage

    The below example shows the mandatory onClick event.

    import React from "react"
    import { USAMap } from "usa-map-react"
    
    const App = () => {
      /* mandatory */
      const mapHandler = (event) => {
        alert(event.target.dataset.name)
      }
    
      return (
        <div className="App">
          <USAMap onClick={mapHandler} />
        </div>
      )
    }
    
    export default App

    Example with optional props, App.js:

    import React, { Component } from "react"
    import "./App.css" /* optional for styling like the :hover pseudo-class */
    import { USAMap } from "usa-map-react"
    
    const App = () => {
      /* mandatory */
      const mapHandler = (event) => {
        alert(event.target.dataset.name)
      }
    
      /* optional customization of filling per state and calling custom callbacks per state */
      const statesCustomConfig = {
        NJ: {
          fill: "navy",
          clickHandler: (event) =>
            console.log("Custom handler for NJ", event.target.dataset),
        },
        NY: {
          fill: "#CC0000",
        },
      }
    
      return (
        <div className="App">
          <USAMap customize={statesCustomConfig} onClick={mapHandler} />
        </div>
      )
    }
    
    export default App

    App.css:

    path {
      pointer-events: all;
    }
    path:hover {
      opacity: 0.5;
      cursor: pointer;
    }

    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
    hideStateTitle Optional prop to prevent state title from appearing on hover

    Additionally each path tag has an abbreviation of the current state followed by a state class:

    <path
      fill="#{custom color or #D3D3D3}"
      data-name="CA"
      class="CA state"
      d="...{polygon dimensions here}..."
    ></path>

    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.

    Install

    npm i usa-map-react

    DownloadsWeekly Downloads

    1

    Version

    0.1.4

    License

    MIT

    Unpacked Size

    45.5 kB

    Total Files

    10

    Last publish

    Collaborators

    • jb-1980