v2.0 🎉 🎉 🎉

.env.dist

@@ -0,0 +1,4 @@
+# Fill in these values and rename this file to .env
+# Then you can run any example in the `examples/` folder with `cd examples/<name> && pnpm dev`
+API_KEY=
+MAP_ID=

.gitignore

@@ -1,2 +1,17 @@
-demo/build.js
-node_modules/
+# MacOS
+.DS_Store
+
+# NodeJS
+node_modules
+.pnpm-store
+
+# IDEs
+.idea
+.vscode
+.fleet
+
+# Build output
+dist
+
+# Env vars
+.env

.npmignore

@@ -1,5 +1,22 @@
-demo/
-src/
-.babelrc
-Procfile
-server.js
+# MacOS
+.DS_Store
+
+# NodeJS
+node_modules
+.pnpm-store
+
+# IDEs
+.idea
+.vscode
+.fleet
+
+# config files
+/*.js
+/*.mjs
+/*.cjs
+/*.ts
+/tsconfig.json
+
+# source
+/src/
+

.prettierrc.mjs

@@ -0,0 +1,8 @@
+export default {
+  arrowParens: "avoid",
+  trailingComma: "all",
+  bracketSpacing: true,
+  singleQuote: false,
+  semi: true,
+  tabWidth: 2,
+};

README.md

@@ -1,101 +1,20 @@
-[![Build Status](https://travis-ci.org/MicheleBertoli/react-gmaps.svg?branch=master)](https://travis-ci.org/MicheleBertoli/react-gmaps)
+# React GMaps
 
-React Gmaps
-===========
+A modern Google Maps integration for ReactJS
 
-A [Google Maps](https://developers.google.com/maps/documentation/javascript/) component for [React.js](http://facebook.github.io/react/)
+## Features
 
-Features
---------
+- Marker, Polyline, Polygon components and more
+- Hook based
+- Highly extensible
+- Interpolation animations for everything (markers, polygons, etc.)
 
-- Lazy Google Maps loading
-- Easy to use
+## TODOs
 
-Installation
-------------
-
-```sh
-$ npm install react-gmaps --save
-```
-
-Demo
-------------
-
-[http://react-gmaps.herokuapp.com/](http://react-gmaps.herokuapp.com/)
-
-Usage
------
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import {Gmaps, Marker, InfoWindow, Circle} from 'react-gmaps';
-
-const coords = {
-  lat: 51.5258541,
-  lng: -0.08040660000006028
-};
-
-const params = {v: '3.exp', key: 'YOUR_API_KEY'};
-
-class App extends React.Component {
-
-  onMapCreated(map) {
-    map.setOptions({
-      disableDefaultUI: true
-    });
-  }
-
-  onDragEnd(e) {
-    console.log('onDragEnd', e);
-  }
-
-  onCloseClick() {
-    console.log('onCloseClick');
-  }
-
-  onClick(e) {
-    console.log('onClick', e);
-  }
-
-  render() {
-    return (
-      <Gmaps
-        width={'800px'}
-        height={'600px'}
-        lat={coords.lat}
-        lng={coords.lng}
-        zoom={12}
-        loadingMessage={'Be happy'}
-        params={params}
-        onMapCreated={this.onMapCreated}>
-        <Marker
-          lat={coords.lat}
-          lng={coords.lng}
-          draggable={true}
-          onDragEnd={this.onDragEnd} />
-        <InfoWindow
-          lat={coords.lat}
-          lng={coords.lng}
-          content={'Hello, React :)'}
-          onCloseClick={this.onCloseClick} />
-        <Circle
-          lat={coords.lat}
-          lng={coords.lng}
-          radius={500}
-          onClick={this.onClick} />
-      </Gmaps>
-    );
-  }
-
-};
-
-ReactDOM.render(<App />, document.getElementById('gmaps'));
-```
-
-Test
-----
-
-```sh
-$ npm test
-```
+- [x] Marker component (displays ReactJS components)
+- [ ] LegacyMarker component (displays images only)
+- [x] Polyline component
+- [x] Polygon component
+- [ ] Circle component
+- [ ] Rectangle component
+- [ ] Overlays