Skip to content

Latest commit

 

History

History
144 lines (105 loc) · 3.54 KB

start-installation.mdx

File metadata and controls

144 lines (105 loc) · 3.54 KB
Raw
title
Installation

import Tabs from '@theme/Tabs' import TabItem from '@theme/TabItem'

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 Getting Started 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.

:::caution Read this before going further Before using React Leaflet, you must setup your project following Leaflet's Quick Start Guide. :::

Adding React Leaflet

:::caution Alpha version React Leaflet v4 is currently in beta and will only officially support React v18, even if it works with React v17. :::

Using ESM imports

React Leaflet export ES Modules that can be imported by URL, notably from CDNs such as esm.sh:

import { MapContainer } from 'https://cdn.esm.sh/react-leaflet@next/MapContainer'
import { TileLayer } from 'https://cdn.esm.sh/react-leaflet@next/TileLayer'
import { useMap } from 'https://cdn.esm.sh/react-leaflet@next/hooks'

Or importing the full library at once:

import {
  MapContainer,
  TileLayer,
  useMap,
} from 'https://cdn.esm.sh/react-leaflet@next'

Using a package registry

A package registry such as npm can be used to install React Leaflet and its dependencies.

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

<Tabs defaultValue="npm" groupId="package-manager" values={[ { label: 'npm', value: 'npm', }, { label: 'yarn', value: 'yarn', }, ] }> 

npm install react react-dom leaflet
yarn add react react-dom leaflet

Then you can install React Leaflet:

<Tabs defaultValue="npm" groupId="package-manager" values={[ { label: 'npm', value: 'npm', }, { label: 'yarn', value: 'yarn', }, ] }> 

npm install react-leaflet@next
yarn add react-leaflet

Modules can then be imported using bare specifiers when supported by a bundler such as webpack.

import { MapContainer } from 'react-leaflet/MapContainer'
import { TileLayer } from 'react-leaflet/TileLayer'
import { useMap } from 'react-leaflet/hooks'

Alternatively, all the components and hooks can be imported from the module entry-point:

import { MapContainer, TileLayer, useMap } from 'react-leaflet'

TypeScript support

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:

<Tabs defaultValue="npm" groupId="package-manager" values={[ { label: 'npm', value: 'npm', }, { label: 'yarn', value: 'yarn', }, ] }> 

npm install -D @types/leaflet
yarn add -D @types/leaflet