DocsExamplesGitHubGetting started


Component to render geographic shapes as SVG paths. The geography component is a simple wrapper around an SVG path element. It is used together with the Geographies wrapper component, which returns an array of geography objects that can be passed to the geography prop of the Geography component.

import { Geography } from "react-simple-maps"


The following is a basic map example, showing how to use the Geography component as a child of Geographies.

* The boundaries and the designations used on this map do not imply the expression of any opinion on the part of the react-simple-maps team or z creative labs and are used for illustrative purposes only. The boundaries and shapes are not part of the react-simple-maps library and are sourced from Natural Earth Data and gadm.org.


When mapping over items, you have to make sure that each item has a unique key. React-simple-maps simplifies the process of giving your individual elements keys, by returning a unique rsmKey.

<Geographies geography={"..."}>
  {({geographies}) => geographies.map(geography =>
    <Geography key={geography.rsmKey} geography={geography} />


You can style individual geographies in three ways. First, you can use individual SVG attributes, such as fill, stroke, and strokeWidth. To find out more about how to style SVG paths with these attributes, check out this handy guide on fill and stroke attributes MDN.

Note that SVG attributes, much like html attributes have to use camel case instead of hyphenation in JSX.

Second, you can use the style prop on the Geography component. It works a little bit differently than the regular style prop, and allows you to specify hover and pressed styles. This is particularly useful when you have a choropleth map, and you are trying to slightly modify the color on hover/press.

Third, you can wrap a Geography with styled-components or emotion, and specify your styles as if it were a regular div (except that background would be fill, and border-color would be stroke).


The Geography component automatically passes rest props to the wrapped SVG path element. All valid SVG attributes can therefore be passed as props to the Geography component.



Sign up to the React Simple Maps newsletter and be the first one to know when we publish new stuff.

Hire Us!

Are you looking for someone to create beautiful mapcharts?

Contact us

React Simple Maps


More Tools

Check out these other design and development tools by z creative labs.

Get Waves

© 2021 z creative labs