React component build on top of React-Leaflet that integrate leaflet-draw feature.

npm install react-leaflet-draw

First, include leaflet-draw styles in your project

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.3/leaflet.draw.css"/>

or by including

node_modules/leaflet-draw/dist/leaflet.draw.css

You might need to add one more rule missing in the current css:

  .sr-only {
    display: none;
  }

It's important to wrap EditControl component into FeatureGroup component from react-leaflet. The elements you draw will be added to this FeatureGroup layer, when you hit edit button only items in this layer will be edited.

import { Map, TileLayer, FeatureGroup, Circle } from 'react-leaflet';
import { EditControl } from "react-leaflet-draw"

const Component = () => (
  <FeatureGroup>
    <EditControl
      position='topright'
      onEdited={this._onEditPath}
      onCreated={this._onCreate}
      onDeleted={this._onDeleted}
      draw={{
        rectangle: false
      }}
    />
    <Circle center={[51.51, -0.06]} radius={200} />
  </FeatureGroup>
);

For more details on how to use this plugin check the example.

You can pass more options on draw object, this informations can be found here

• Control position options
• DrawOptions
• EditPolyOptions
• Draw events