# React Simple Maps

> A React library for creating SVG maps with d3-geo and TopoJSON. It handles
> projections, panning and zooming, and rendering geographies so you can build
> map charts declaratively without writing d3 code.

This is the documentation for React Simple Maps v5. Map data is supplied as
TopoJSON or GeoJSON; the library does not bundle any map files.

## Overview

- [Home](https://www.react-simple-maps.io/): Project overview and live examples.
- [Documentation](https://www.react-simple-maps.io/docs): Index of all guides, components, and hooks.

## Guides

- [Getting started](https://www.react-simple-maps.io/docs/getting-started)
- [Working with data](https://www.react-simple-maps.io/docs/working-with-data): Load a CSV alongside a US states TopoJSON and join the two on an id property to build a quantized unemployment choropleth.
- [Map files](https://www.react-simple-maps.io/docs/map-files)
- [Projections](https://www.react-simple-maps.io/docs/projections)
- [Styling](https://www.react-simple-maps.io/docs/styling): Style react-simple-maps with SVG attributes, CSS classes and CSS variables, including choropleth hover states and animation with motion.
- [Migrating to v5](https://www.react-simple-maps.io/docs/migrating-to-v5): Upgrade react-simple-maps from v3 to v5: the style prop change, new subpath exports, TypeScript types and the fixes that come with them.

## Components

- [Annotation](https://www.react-simple-maps.io/docs/annotation): Label a coordinate in react-simple-maps with offset text and a curved connector drawn back to the point.
- [ComposableMap](https://www.react-simple-maps.io/docs/composable-map): The root component for react-simple-maps. Renders the SVG container and sets up the d3-geo projection shared by every layer in the map.
- [Geographies](https://www.react-simple-maps.io/docs/geographies): Load TopoJSON or GeoJSON map data in react-simple-maps and render each feature through a render prop, with SVG paths precomputed for you.
- [Geography](https://www.react-simple-maps.io/docs/geography): Render a single map feature as an SVG path in react-simple-maps, with full control over fill, stroke and interaction.
- [Graticule](https://www.react-simple-maps.io/docs/graticule): Draw a configurable grid of meridians and parallels over a react-simple-maps map as a geographic reference layer.
- [Line](https://www.react-simple-maps.io/docs/line): Draw a projected line between two or more coordinates in react-simple-maps, following the curvature of the map.
- [MapProvider](https://www.react-simple-maps.io/docs/map-provider): Provide the react-simple-maps projection context without rendering an SVG element, for maps where you own the markup.
- [Marker](https://www.react-simple-maps.io/docs/marker): Place labels, pins and any SVG content at a longitude and latitude on a react-simple-maps map.
- [Sphere](https://www.react-simple-maps.io/docs/sphere): Draw the globe outline in react-simple-maps and clip map layers to it, for orthographic and other projections with a visible edge.
- [ZoomableGroup](https://www.react-simple-maps.io/docs/zoomable-group): Add mouse and touch pan and zoom to a react-simple-maps map, with configurable zoom limits, pan bounds and gesture callbacks.
- [ZoomPanProvider](https://www.react-simple-maps.io/docs/zoom-pan-provider): Provide the react-simple-maps zoom and pan transform context to child components when building custom zoom behaviour.

## Hooks

- [useGeographies](https://www.react-simple-maps.io/docs/use-geographies): Load TopoJSON or GeoJSON map data in react-simple-maps without the Geographies wrapper, returning features with precomputed SVG paths.
- [useMapContext](https://www.react-simple-maps.io/docs/use-map-context): Read the d3-geo projection, path generator and map dimensions from react-simple-maps to build your own map-aware components.
- [useZoomPan](https://www.react-simple-maps.io/docs/use-zoom-pan): Build custom pan and zoom behaviour in react-simple-maps with the d3-zoom hook behind ZoomableGroup, including gesture callbacks and bounds.
- [useZoomPanContext](https://www.react-simple-maps.io/docs/use-zoom-pan-context): Read the current zoom and pan transform in react-simple-maps to keep marker sizes constant or swap detail levels as the map scales.