Skip to content

Commit cbca80a

Browse files
itseasy21itseasy21
authored
Merge pull request #6 from itseasy21/fix/types-example-build
Fix/types example build
2 parents 961afd4 + 948c8b0 commit cbca80a

6 files changed

Lines changed: 183 additions & 47 deletions

File tree

‎.changeset/true-bananas-hang.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
"react-leaflet-draw-next": patch
3+
---
4+
5+
- Fixed TypeScript definitions to include missing `featureGroup` property in `EditControlProps` interface
6+
- Updated `edit` property type to use full `Control.EditOptions` instead of omitting `featureGroup`
7+
- Added comprehensive JSDoc comments for all properties in TypeScript definitions
8+
- Enhanced README with TypeScript usage examples and better documentation
9+
- Improved breaking changes documentation for React 19 and react-leaflet v5 compatibility
10+

‎README.md‎

Lines changed: 100 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -31,30 +31,105 @@ You might need to add one more rule missing in the current css:
3131
It's important to wrap EditControl component into FeatureGroup component from `react-leaflet`.
3232
The elements you draw will be added to this FeatureGroup layer, when you hit edit button only items in this layer will be edited.
3333

34+
### JavaScript Usage
35+
3436
```jsx
3537
import { MapContainer, TileLayer, FeatureGroup, Circle } from 'react-leaflet';
3638
import { EditControl } from "react-leaflet-draw-next"
3739

38-
const Component = () => (
39-
<MapContainer center={[51.51, -0.06]} zoom={13}>
40-
<TileLayer
41-
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
42-
url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
43-
/>
44-
<FeatureGroup>
45-
<EditControl
46-
position='topright'
47-
onEdited={this._onEditPath}
48-
onCreated={this._onCreate}
49-
onDeleted={this._onDeleted}
50-
draw={{
51-
rectangle: false
52-
}}
40+
const Component = () => {
41+
const featureGroupRef = useRef();
42+
43+
return (
44+
<MapContainer center={[51.51, -0.06]} zoom={13}>
45+
<TileLayer
46+
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
47+
url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
5348
/>
54-
<Circle center={[51.51, -0.06]} radius={200} />
55-
</FeatureGroup>
56-
</MapContainer>
57-
);
49+
<FeatureGroup ref={featureGroupRef}>
50+
<EditControl
51+
position='topright'
52+
onEdited={this._onEditPath}
53+
onCreated={this._onCreate}
54+
onDeleted={this._onDeleted}
55+
draw={{
56+
rectangle: false
57+
}}
58+
featureGroup={featureGroupRef.current}
59+
/>
60+
<Circle center={[51.51, -0.06]} radius={200} />
61+
</FeatureGroup>
62+
</MapContainer>
63+
);
64+
};
65+
```
66+
67+
### TypeScript Usage
68+
69+
```tsx
70+
import * as React from 'react';
71+
import * as L from 'leaflet';
72+
import { MapContainer, TileLayer, FeatureGroup, Circle } from 'react-leaflet';
73+
import { EditControl } from "react-leaflet-draw-next";
74+
75+
interface ComponentProps {
76+
// your props here
77+
}
78+
79+
const Component: React.FC<ComponentProps> = () => {
80+
const featureGroupRef = React.useRef<L.FeatureGroup>(null);
81+
const [featureGroupReady, setFeatureGroupReady] = React.useState(false);
82+
83+
React.useEffect(() => {
84+
if (featureGroupRef.current && !featureGroupReady) {
85+
setFeatureGroupReady(true);
86+
}
87+
}, [featureGroupReady]);
88+
89+
const handleEdited = (e: L.DrawEvents.Edited) => {
90+
// Handle edited event
91+
console.log('Features edited:', e);
92+
};
93+
94+
const handleCreated = (e: L.DrawEvents.Created) => {
95+
// Handle created event
96+
console.log('Feature created:', e);
97+
};
98+
99+
const handleDeleted = (e: L.DrawEvents.Deleted) => {
100+
// Handle deleted event
101+
console.log('Features deleted:', e);
102+
};
103+
104+
return (
105+
<MapContainer center={[51.51, -0.06]} zoom={13}>
106+
<TileLayer
107+
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
108+
url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
109+
/>
110+
<FeatureGroup ref={featureGroupRef}>
111+
{featureGroupReady && featureGroupRef.current && (
112+
<EditControl
113+
position="topright"
114+
onEdited={handleEdited}
115+
onCreated={handleCreated}
116+
onDeleted={handleDeleted}
117+
draw={{
118+
rectangle: false,
119+
circle: true,
120+
polyline: true,
121+
polygon: true,
122+
marker: false,
123+
circlemarker: false,
124+
}}
125+
featureGroup={featureGroupRef.current}
126+
/>
127+
)}
128+
<Circle center={[51.51, -0.06]} radius={200} />
129+
</FeatureGroup>
130+
</MapContainer>
131+
);
132+
};
58133
```
59134

60135
For more details on how to use this plugin check out the examples [example](examples).
@@ -68,9 +143,13 @@ You can pass more options on draw object, this informations can be found [here](
68143
This package is specifically designed for React 19 and react-leaflet v5. Key changes from the original react-leaflet-draw:
69144

70145
- Uses `MapContainer` instead of `Map`
71-
- Requires passing the `featureGroup` prop to `EditControl` with the actual Leaflet FeatureGroup instance
146+
- **Requires passing the `featureGroup` prop to `EditControl` with the actual Leaflet FeatureGroup instance**
72147
- Compatible with the new hooks-based architecture of react-leaflet v5
73148

149+
### Breaking Changes
150+
151+
⚠️ **Important**: The `featureGroup` prop is now **required** for proper functionality with react-leaflet v5. This is a breaking change from previous versions.
152+
74153
## EditControl API
75154

76155
#### Props
@@ -80,7 +159,7 @@ This package is specifically designed for React 19 and react-leaflet v5. Key cha
80159
|position |string |control group position |
81160
|draw |object <DrawOptions> |enable/disable draw controls |
82161
|edit |object <EditPolyOptions> |enable/disable edit controls |
83-
|featureGroup |object |L.FeatureGroup instance (required for react-leaflet v5)|
162+
|featureGroup |L.FeatureGroup |**Required**: L.FeatureGroup instance for react-leaflet v5|
84163
|onEdited |function |hook to leaflet-draw's `draw:edited` event |
85164
|onCreated |function |hook to leaflet-draw's `draw:created` event |
86165
|onDeleted |function |hook to leaflet-draw's `draw:deleted` event |

‎examples/hooks/vite.config.ts‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
/* eslint-disable import/no-extraneous-dependencies */
22
import { resolve } from 'path';
3-
43
import { defineConfig } from 'vite';
54

6-
export default defineConfig(() => ({
5+
export default defineConfig({
76
build: {
87
target: ['safari11.1', 'chrome64', 'firefox66', 'edge88'],
98
outDir: resolve(__dirname, './dist'),
10-
input: { main: resolve(__dirname, 'index.html') },
119
assetsDir: '',
1210
emptyOutDir: true,
1311
},
@@ -16,4 +14,10 @@ export default defineConfig(() => ({
1614
open: true,
1715
port: 8002,
1816
},
19-
}));
17+
optimizeDeps: {
18+
include: ['react', 'react-dom', 'leaflet', 'react-leaflet']
19+
},
20+
esbuild: {
21+
target: 'es2020'
22+
}
23+
});

‎package-lock.json‎

Lines changed: 33 additions & 18 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,8 @@
8383
"react": "^19.1.0",
8484
"react-dom": "^19.1.0",
8585
"react-leaflet": "^5.0.0",
86-
"vite": "^7.0.0",
86+
"typescript": "^5.9.2",
87+
"vite": "^6.3.5",
8788
"webpack": "^5.99.9",
8889
"webpack-cli": "^4.9.2",
8990
"webpack-dev-server": "^4.9.2"

‎src/index.d.ts‎

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,61 @@ import type {
66
ControlPosition,
77
DrawEvents,
88
} from 'leaflet';
9+
import * as L from 'leaflet';
910

11+
/**
12+
* Props interface for the EditControl component
13+
*/
1014
interface EditControlProps {
15+
/** Callback fired when features are edited */
1116
onEdited?: (v: DrawEvents.Edited) => void;
17+
/** Callback fired when drawing starts */
1218
onDrawStart?: (v: DrawEvents.DrawStart) => void;
19+
/** Callback fired when drawing stops */
1320
onDrawStop?: (v: DrawEvents.DrawStop) => void;
21+
/** Callback fired when a vertex is drawn */
1422
onDrawVertex?: (v: DrawEvents.DrawVertex) => void;
23+
/** Callback fired when editing starts */
1524
onEditStart?: (v: DrawEvents.EditStart) => void;
25+
/** Callback fired when features are moved during editing */
1626
onEditMove?: (v: DrawEvents.EditMove) => void;
27+
/** Callback fired when features are resized during editing */
1728
onEditResize?: (v: DrawEvents.EditResize) => void;
29+
/** Callback fired when a vertex is edited */
1830
onEditVertex?: (v: DrawEvents.EditVertex) => void;
31+
/** Callback fired when editing stops */
1932
onEditStop?: (v: DrawEvents.EditStop) => void;
33+
/** Callback fired when features are deleted */
2034
onDeleted?: (v: DrawEvents.Deleted) => void;
35+
/** Callback fired when deletion starts */
2136
onDeleteStart?: (v: DrawEvents.DeleteStart) => void;
37+
/** Callback fired when deletion stops */
2238
onDeleteStop?: (v: DrawEvents.DeleteStop) => void;
23-
39+
/** Callback fired when new features are created */
2440
onCreated?: (v: DrawEvents.Created) => void;
41+
/** Callback fired when the control is mounted */
2542
onMounted?: Function;
26-
edit?: Omit<Control.EditOptions, "featureGroup">;
43+
/** Edit options for the control */
44+
edit?: Control.EditOptions;
45+
/** Draw options for different shape types */
2746
draw: {
47+
/** Polyline drawing options */
2848
polyline?: DrawOptions.PolylineOptions | boolean;
49+
/** Polygon drawing options */
2950
polygon?: DrawOptions.PolygonOptions | boolean;
51+
/** Rectangle drawing options */
3052
rectangle?: DrawOptions.RectangleOptions | boolean;
53+
/** Circle drawing options */
3154
circle?: DrawOptions.CircleOptions | boolean;
55+
/** Marker drawing options */
3256
marker?: DrawOptions.MarkerOptions | boolean;
57+
/** Circle marker drawing options */
3358
circlemarker?: DrawOptions.CircleOptions | boolean;
3459
};
35-
60+
/** Position of the control on the map */
3661
position: ControlPosition;
62+
/** Feature group to manage drawn features */
63+
featureGroup?: L.FeatureGroup;
3764
}
3865

3966
export class EditControl extends React.Component<EditControlProps> {}

0 commit comments

Comments
 (0)