react-geo-charts

You're looking for an SVG-based React map that supports:

• World-level view with countries
• Drill-down to states/provinces (geo-regions)
• Interactive selection and custom metadata
• Custom styling (color, CSS, tooltip, etc.) etc...

Install

npm i react-geo-charts

Usage

import React from 'react';
import WorldSVGMap, { dataSet } from "react-geo-charts"
import "./App.css"

const type = {
  "Continent": "Continent",
  "1": "1"
}

function App() {
  const [regioncode, setregioncode] = React.useState("US")
  const [code, setcode] = React.useState([])

  const customizeFuncation = () => {
    let customizeData = {}, data = dataSet.US; // find in dataset as regioncode
    for (let key in data) {
      customizeData[key] = {
        fill: code.includes(key) ? "blue" : "#fff",
        stroke: code.includes(key) ? "red" : "#222",
        identifierdata: data[key] + "100%",
        regiontooltipdisable: key == "AK", // Alaska
        disable: key == "AK", // Alaska
        onClick: (ISOIdentifier) => {
          setcode(code.includes(ISOIdentifier) ? code.filter(e => e != ISOIdentifier) : [...code, ISOIdentifier])
        }
      }
    }
    return customizeData
  }

  return (
    <div className="App">
      <WorldSVGMap
        regioncode={regioncode}
        containerClass=""
        width="100%"
        height="100%"
        filldefault="#ccc"
        strokedefault="#222"
        customize={customizeFuncation()}
        figure={type[1]} // for continent use like type.Continent
        tooltipdisable={true}
      />
    </div>
  );
}

export default App;

ReactDOM.render(<App/>, document.body)

list of props

| Prop | Description | Type | Default | | ----------------- | -------------------------------------------------------------- | ------------------ | ----------------- | | regioncode | options for regioncode: countries:[US, IN, AU, CA] with variant US1, IN1 'worldmap',continent:[AF,AS,EU,NA,OC,SA] | String | "" | | width | width option for svg tag | String | 100% | | height | height option for svg tag | String | 100% | | filldefault | region fill default color | String | #fff | | strokedefault | region stroke(border) default color | String | #222 | | viewBox | set to svg tag viewBox attribute | String | according to map | | figure | use for variant and continent type map as you can see in example | String | "" | | tooltipdisable | use for all regions with tooltips disabled. | Bool | false | | customize | customize option | Object | '{}' |
| identifierdata | customize the option in the set ‘identifierdata’ as a tooltip. | String | 'worldmap' and 'continentmap' in country or 'countrymap' in state,provinces | | regiontooltipdisable | customize the option in the set ‘regiontooltipdisable’ as tooltip disable for a specific region. you can see in the example. | Bool | false | | disable | Customize the option in the set 'disable' to a specific region. you can see in example | Bool | false |

Maps

License

MIT.

Copyright (c) 2025 Jeel Chheta