V2 (#9)

* Supporting react leaflet v3

README.md

@@ -2,34 +2,37 @@
 [![Coverage Status](https://coveralls.io/repos/github/aviklai/react-leaflet-kml/badge.svg?branch=master)](https://coveralls.io/github/aviklai/react-leaflet-kml?branch=master) 
 [![npm version](https://img.shields.io/npm/v/react-leaflet-kml.svg)](https://www.npmjs.com/package/react-leaflet-kml)
 
-React leaflet wrapper of leaflet-kml.
+React leaflet v3 wrapper of leaflet-kml.
 
-Installation instructions:
+## Requirements
+The current version of this library supports React Leaflet v3. <br/>
+If you are using React Leaflet v2, please use the previous version of this library. Please see the documentation here: <br/>
+https://github.com/aviklai/react-leaflet-kml/tree/v1
+
+## Installation instructions:
 run `npm install --save react-leaflet-kml`
 
 Usage example:
 ```
 import * as React from 'react';
-import { Map } from 'react-leaflet';
+import { MapContainer } from 'react-leaflet';
 import ReactLeafletKml from 'react-leaflet-kml';
 
 const kmlText='YOUR KML FILE AS TEXT';
 const parser = new DOMParser();
 const kml = parser.parseFromString(kmlText, 'text/xml');
 
-export class App extends React.Component { 
-  render() {    
-    return (
-      <Map zoom={15} center={[45, 20]}>
+export const App = () => { 
+  return (
+      <MapContainer zoom={15} center={[45, 20]}>
         <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-          attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
+        attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
         />
         <ReactLeafletKml kml={kml} />
-      </Map>
-    );
-  }
-}
+      </MapContainer>
+  );
+};
 ```
 
 ## Basic usage example
-https://codesandbox.io/s/basic-usage-itkpv
+https://codesandbox.io/s/basic-usage-react-leaflet-v3-pzcvt

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-leaflet-kml",
-  "version": "1.0.4",
+  "version": "2.0.0",
   "description": "React leaflet wrapper of leaflet-kml",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -20,6 +20,9 @@
     "postversion": "git push && git push --tags",
     "cover": "jest --config jestconfig.json --coverage && cat ./coverage/lcov.info | coveralls"
   },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/aviklai/react-leaflet-kml.git"
@@ -29,7 +32,8 @@
     "Leaflet",
     "kml",
     "leaflet-kml",
-    "typescript"
+    "typescript",
+    "react-leaflet-v3"
   ],
   "author": "",
   "license": "MIT",
@@ -38,30 +42,29 @@
   },
   "homepage": "https://github.com/aviklai/react-leaflet-kml#readme",
   "peerDependencies": {
-    "leaflet": "^1.3.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "react-leaflet": "^2.0.0"
+    "leaflet": "^1.5.0",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
+    "react-leaflet": "^3.0.0"
   },
   "devDependencies": {
     "@types/jest": "^24.0.9",
-    "@types/leaflet": "^1.4.1",
+    "@types/leaflet": "^1.5.0",
     "@types/react": "^16.8.7",
     "@types/react-dom": "^16.8.2",
-    "@types/react-leaflet": "^2.2.0",
-    "@types/react-test-renderer": "^16.8.1",
+    "@types/react-test-renderer": "^16.9.3",
     "coveralls": "^3.0.3",
     "jest": "^24.3.0",
     "leaflet": "^1.4.0",
     "prettier": "^1.16.4",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
-    "react-leaflet": "^2.2.1",
-    "react-test-renderer": "^16.8.4",
+    "react-leaflet": "^3.0.0",
+    "react-test-renderer": "^16.14.0",
     "ts-jest": "^24.0.0",
     "tslint": "^5.13.1",
     "tslint-config-prettier": "^1.18.0",
-    "typescript": "^3.8.3",
+    "typescript": "^4.0.5",
     "uglify-js": "^3.5.15"
   },
   "dependencies": {

src/__tests__/ReactLeafletKml.test.tsx

@@ -1,16 +1,20 @@
 import * as React from 'react';
+import ReactDOM from 'react-dom';
+import { MapContainer } from 'react-leaflet';
 import ReactLeafletKml from '../index';
-import { Map } from 'react-leaflet';
 import * as ReactTestUtils from 'react-dom/test-utils';
 
 test('ReactLeafletKml', () => {
   expect(ReactLeafletKml);
 
-  const component = ReactTestUtils.renderIntoDocument(
-    <Map>
-      <ReactLeafletKml kml={new Document()}/>
-    </Map>
+  const dom = ReactTestUtils.renderIntoDocument(
+    <div>
+      <MapContainer>
+        <ReactLeafletKml kml={new Document()}/>
+      </MapContainer>
+    </div>
   ) as any;
-  expect(component.leafletElement._container).toBeDefined()  
+  const component = ReactDOM.findDOMNode(dom.childNodes[0]) as any;
+  expect(component).toBeInstanceOf(HTMLElement);  
 
 });