Installation

React prerequisites

This documentation assumes you are already familiar with React and have a project setup. If it is not the case, you should read React's Quick Start documentation first.

Leaflet prerequisites

This documentation assumes you are already familiar with Leaflet. React Leaflet does not replace Leaflet, it only provides bindings between React and Leaflet.

This documentation is not a replacement for Leaflet's documentation, it only focuses on aspects specific to React Leaflet.

Read this before going further

Before using React Leaflet, you must setup your project following Leaflet's Quick Start Guide.

Adding React Leaflet

React, React DOM and Leaflet are required peer dependencies. You must add them to your project if they are not already installed:

npm

npm install react@17 react-dom@17 leaflet

yarn

yarn add react@17 react-dom@17 leaflet

Note that React Leaflet v3 only supports React v17, v18 is not supported.

Then you can install React Leaflet:

npm

npm install react-leaflet

yarn

yarn add react-leaflet

Finally, you can import the necessary components. For example:

import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'

Using TypeScript

React Leaflet provides TypeScript definitions in the installed packages, but needs Leaflet's definitions to be present. If you have not installed them yet, you will need to add them:

npm

npm install -D @types/leaflet

yarn

yarn add -D @types/leaflet