v4.0.0

Author: Cédric Delpoux

.babelrc

@@ -1,51 +1,18 @@
 {
   "parser": "babel-eslint",
-
-  "plugins": [
-    "react"
-  ],
-
   "env": {
+    "amd": true,
     "es6": true,
-    "browser": true,
-    "node": true,
-    "mocha": true
-  },
-
-  "ecmaFeatures": {
-    "jsx": true,
-    "modules": true
+    "jest/globals": true
   },
-
-  "rules": {
-    "block-scoped-var": 0,
-    "brace-style": [2, "1tbs", {"allowSingleLine": true}],
-    "camelcase": 0,
-    "comma-dangle": [1, "always-multiline"],
-    "comma-style": [1, "last"],
-    "consistent-this": [2, "self"],
-    "curly": 0,
-    "indent": [1, 2],
-    "no-multiple-empty-lines": [1, {"max": 1}],
-    "no-self-compare": 2,
-    "no-underscore-dangle": 0,
-    "no-unused-vars": [2, {"vars": "all", "args": "none"}],
-    "no-use-before-define": 0,
-    "no-var": 2,
-    "semi": [2, "never"],
-    "space-before-blocks": [1, "always"],
-    "space-before-function-paren": [1, "never"],
-    "space-in-parens": [1, "never"],
-    "spaced-comment": [1, "always"],
-    "strict": [2, "never"],
-    "react/jsx-boolean-value": [1, "never"],
-    "react/jsx-uses-react": 2,
-    "react/jsx-uses-vars": 2,
-    "react/jsx-wrap-multilines": 1,
-    "react/no-did-mount-set-state": 2,
-    "react/no-did-update-set-state": 2,
-    "react/react-in-jsx-scope": 2,
-    "react/self-closing-comp": 1,
-    "quotes": [1, "double", "avoid-escape"]
+  "plugins": ["jest", "prettier", "react"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:jest/recommended",
+    "plugin:react/recommended",
+    "prettier"
+  ],
+  "globals": {
+    "window": true
   }
 }

.eslintrc

@@ -1,4 +1,7 @@
-lib
-node_modules
-npm-debug.log
-.DS_Store
+/coverage
+/demo/dist
+/es
+/lib
+/node_modules
+/umd
+npm-debug.log*

.gitignore

@@ -0,0 +1,6 @@
+{
+  "*.js": [
+    "prettier --no-bracket-spacing --no-semi --trailing-comma=es5 --write",
+    "git add"
+  ]
+}

.lintstagedrc

@@ -0,0 +1,14 @@
+sudo: false
+
+language: node_js
+node_js: 8
+
+before_install:
+  - npm install codecov
+
+after_success:
+  - cat ./coverage/lcov.info | ./node_modules/.bin/codecov
+
+branches:
+  only:
+    - master

.travis.yml

@@ -1,3 +1,10 @@
+# 4.0.0 - 2017-10-25
+* Update : Tranform Hight Order Component to React Component using a render prop
+* Add : CommonJS build
+* Add : ES6 build
+* Add : UMD build
+* Add : Demo page
+
 # 3.0.1 - 2017-07-03
 * Update : Documentation
 

CHANGELOG.md

@@ -0,0 +1,35 @@
+# Contributing 
+
+## Prerequisites
+
+[Node.js](http://nodejs.org/) >= v4 must be installed.
+
+## Installation
+
+- Running `yarn install` in the components's root directory will install everything you need for development.
+
+## Demo Development Server
+
+- `yarn start` will run a development server with the component's demo app at [http://localhost:3000](http://localhost:3000) with hot module reloading.
+
+## Linting
+
+- `yarn run lint` will lint the `src` and `demo/src` folders
+
+## Running Tests
+
+- `yarn test` will run the tests once and produce a coverage report in `coverage/`.
+
+- `yarn run test:watch` will run the tests on every change.
+
+## Building
+
+- `yarn run build` will build the component for publishing to npm and also bundle the demo app.
+
+- `yarn run clean` will delete built resources.
+
+> **Builds:**
+> * CommonJS build => `/lib`,
+> * ES6 modules build => `/es`
+> * UMD build => `/umd`
+> * Demo build => `/demo/dist`

CONTRIBUTING.md

@@ -1,100 +1,78 @@
-# react-google-maps-loader ![npm](https://img.shields.io/npm/v/react-google-maps-loader.svg) ![license](https://img.shields.io/npm/l/react-google-maps-loader.svg) ![github-issues](https://img.shields.io/github/issues/xuopled/react-google-maps-loader.svg)
+# react-google-maps-loader
 
-React HOC to use google maps services into your react applications
+[![npm package][npm-badge]][npm]
+[![Travis][build-badge]][build]
+[![Codecov][codecov-badge]][codecov]
+![Module formats][module-formats]
 
-## Install
+React Component to use google maps services into your react applications using a render prop.
 
-```sh
-npm install --save react-google-maps-loader
+## Getting started
 
-// OR
+[![react-google-maps-loader](https://nodei.co/npm/react-google-maps-loader.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/react-google-maps-loader/)
 
+You can download `react-google-maps-loader` from the NPM registry via the `npm` or `yarn` commands
+
+```shell
 yarn add react-google-maps-loader
+npm install react-google-maps-loader --save
 ```
 
-## Changelog
+If you don't use package manager and you want to include `react-google-maps-loader` directly in your html, you could get it from the UNPKG CDN
 
-See [changelog](./CHANGELOG.md)
+```html
+https://unpkg.com/react-google-maps-loader/dist/react-google-maps-loader.min.js.
+```
 
 ## Usage
 
-The `googleMapsLoader` HOC take an options object in parameter.
-You can specify any parameters Google let you use to load Google Maps API.
-Checkout [Google Maps Javascript API documentation](https://developers.google.com/maps/documentation/javascript/libraries) to specify librairies or others parameters.
-
-```js
-import React, {Component} from "react"
-import googleMapsLoader from "react-google-maps-loader"
-
-CONST = GOOGLE_MAPS_API_KEY = "myapikey" // Change your api key
-
-class MyComponent extends Component {
-    constructor() {
-        super()
-        this.state = {
-            map: null,
-        }
-    }
-
-    componentDidMount() {
-        if (this.props.googleMaps)
-            this.initMap()
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        if (!prevProps.googleMaps && this.props.googleMaps)
-            this.initMap()
-        }
-    }
-
-    initMap() {
-        const map = new googleMaps.Map(this.ref_map)
-        this.setState({map})
-    }
-
-    render() {
-        const {googleMaps} = this.props
-
-        // You should handle the case when Google Maps is not loaded yet
-        return googleMaps
-            ? <div ref={ref => this.ref_map = ref} />
-            : <Spinner /> // You should use a custom loader here
-    }
-}
-
-export default googleMapsLoader(MyComponent, {
-  libraries: ["places", "geometry"],
-  key: GOOGLE_MAPS_API_KEY,
-})
+```javascript
+import React from "react"
+import BankCard from "react-google-maps-loader"
+
+const App = () =>
+  <ReactGoogleMapLoader
+    params={{
+        key: YOUR_API_KEY, // Define your api key here
+        libraries: "places,geometry", // To request multiple libraries, separate them with a comma
+    }}
+    render={googleMaps =>
+        googleMaps && (
+            <div>Google Maps is loaded !</div>
+        )}
+    />
 ```
 
-## Development
+## Demo
 
-### Clean `lib` folder
+See [Demo page][github-page]
 
-```js
-npm run clean
-```
+## Contributing
 
-### Build `lib` folder
+* ⇄ Pull/Merge requests and ★ Stars are always welcome.
+* For bugs and feature requests, please [create an issue][github-issue].
+* Pull requests must be accompanied by passing automated tests (`npm test`).
 
-```js
-npm run build
-```
+See [CONTRIBUTING.md](./CONTRIBUTING.md) guidelines
 
-### Watch `src` folder
+## Changelog
 
-```js
-npm run watch
-```
+See [changelog](./CHANGELOG.md)
 
-### Lint `src` folder
+## License
 
-```js
-npm run lint
-```
+This project is licensed under the MIT License - see the [LICENCE.md](./LICENCE.md) file for details
 
-## License
+[npm-badge]: https://img.shields.io/npm/v/react-google-maps-loader.svg?style=flat-square
+[npm]: https://www.npmjs.org/package/react-google-maps-loader
+
+[build-badge]: https://img.shields.io/travis/xuopled/react-google-maps-loader/master.svg?style=flat-square
+[build]: https://travis-ci.org/xuopled/react-google-maps-loader
+
+[codecov-badge]: https://img.shields.io/codecov/c/github/xuopled/react-google-maps-loader.svg?style=flat-square
+[codecov]: https://codecov.io/gh/xuopled/react-google-maps-loader
+
+[module-formats]: https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg?style=flat-square
 
-See [MIT](./LICENCE)
+[github-page]: https://xuopled.github.io/react-google-maps-loader
+[github-issue]: https://github.com/xuopled/react-google-maps-loader/issues/new

LICENCE renamed to LICENCE.md

@@ -0,0 +1,26 @@
+## Code
+
+```javascript
+import ReactGoogleMapLoader from "react-google-maps-loader"
+import ReactGoogleMap from "react-google-map"
+
+const YourComponent = () => 
+    <ReactGoogleMapLoader
+        params={{
+            key: "AIzaSyCI3cDduwloUnVSfREo-6wuRYTMjOHcQjc",
+            libraries: "places,geometry",
+        }}
+        render={googleMaps =>
+            googleMaps && (
+              <div style={{height: "300px"}}>
+                <ReactGoogleMap
+                  googleMaps={googleMaps}
+                  center={{lat: 43.604363, lng: 1.443363}}
+                  zoom={8}
+                />
+              </div>
+            )}
+    />
+```
+
+## Demo

README.md

@@ -0,0 +1,32 @@
+import React from "react"
+import {render} from "react-dom"
+
+import ReactDemoPage from "react-demo-page"
+import routes from "./routes"
+import pkg from "../../package.json"
+
+const header = {
+  title: pkg.name,
+  buttons: [
+    {label: "Github", url: pkg.homepage},
+    {label: "Npm", url: `https://www.npmjs.com/package/${pkg.name}`},
+    {label: "Download", url: `${pkg.homepage}/archive/master.zip`},
+  ],
+}
+
+const footer = {
+  author: pkg.author,
+}
+
+const Demo = () => (
+  <ReactDemoPage
+    basename={pkg.name}
+    header={header}
+    footer={footer}
+    pages={routes}
+    color="#44B39D"
+  />
+)
+
+// eslint-disable-next-line
+render(<Demo />, document.querySelector("#demo"))