Skip to content

Commit 2131f07

Browse files
author
Cédric Delpoux
committed
Initial release
0 parents  commit 2131f07

File tree

10 files changed

+323
-0
lines changed

10 files changed

+323
-0
lines changed

.babelrc

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"stage": 0,
3+
"loose": ["es6.modules", "es6.classes"],
4+
"blacklist": [
5+
"es6.tailCall",
6+
"spec.functionName"
7+
]
8+
}

.editorconfig

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
end_of_line = lf
6+
insert_final_newline = true
7+
trim_trailing_whitespace = true
8+
indent_style = space
9+
indent_size = 2
10+
11+
[*.md]
12+
indent_size = 4
13+
trim_trailing_whitespace = false

.eslintrc

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
{
2+
"parser": "babel-eslint",
3+
4+
"plugins": [
5+
"react"
6+
],
7+
8+
"env": {
9+
"es6": true,
10+
"browser": true,
11+
"node": true,
12+
"mocha": true
13+
},
14+
15+
"ecmaFeatures": {
16+
"jsx": true,
17+
"modules": true
18+
},
19+
20+
"rules": {
21+
"block-scoped-var": 0,
22+
"brace-style": [2, "1tbs", {"allowSingleLine": true}],
23+
"camelcase": 0,
24+
"comma-dangle": [1, "always-multiline"],
25+
"comma-style": [1, "last"],
26+
"consistent-this": [2, "self"],
27+
"curly": 0,
28+
"indent": [1, 2],
29+
"quotes": [1, "single", "avoid-escape"],
30+
"no-multiple-empty-lines": [1, {"max": 1}],
31+
"no-self-compare": 2,
32+
"no-underscore-dangle": 0,
33+
"no-unused-vars": [2, {"vars": "all", "args": "none"}],
34+
"no-use-before-define": 0,
35+
"no-var": 2,
36+
"semi": [2, "never"],
37+
"space-after-keywords": [1, "always"],
38+
"space-before-blocks": [1, "always"],
39+
"space-before-function-parentheses": [1, "never"],
40+
"space-in-parens": [1, "never"],
41+
"spaced-line-comment": [1, "always"],
42+
"strict": [2, "never"],
43+
"react/jsx-boolean-value": [1, "never"],
44+
"react/jsx-quotes": [1, "double", "avoid-escape"],
45+
"react/jsx-uses-react": 2,
46+
"react/jsx-uses-vars": 2,
47+
"react/no-did-mount-set-state": 2,
48+
"react/no-did-update-set-state": 2,
49+
"react/react-in-jsx-scope": 2,
50+
"react/self-closing-comp": 1,
51+
"react/wrap-multilines": 1
52+
}
53+
}

.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
lib
2+
node_modules
3+
npm-debug.log
4+
.DS_Store

CHANGELOG.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Changelog
2+
3+
## 1.0.0 - 2015-09-08
4+
5+
* Initial release

LICENCE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) Cédric Delpoux
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

README.md

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
# 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/cedricdelpoux/react-google-maps-loader.svg)
2+
3+
React decorator to use google maps services into your react applications
4+
5+
## Install
6+
7+
```sh
8+
npm install --save react-google-maps-loader
9+
```
10+
11+
## Changelog
12+
13+
See [changelog](./CHANGELOG.md)
14+
15+
## Usage
16+
17+
The `googleMapsLoader` decorator take an options object in parameter.
18+
You can specify any parameters Google let you use to load Google Maps API.
19+
Checkout [Google Maps Javascript API documentation](https://developers.google.com/maps/documentation/javascript/libraries) to specify librairies or others parameters.
20+
21+
```js
22+
import React, { Component } from 'react'
23+
import googleMapsLoader from 'react-google-maps-loader'
24+
25+
CONST = GOOGLE_MAPS_API_KEY = 'myapikey' // Change your api key
26+
27+
@googleMapsLoader({ key: GOOGLE_MAPS_API_KEY, libraries: ['places','geometry'] })
28+
export default class MyComponent extends Component {
29+
state = {
30+
map: null,
31+
}
32+
33+
componentDidMount() {
34+
const { googleMaps } = this.props
35+
const map = new googleMaps.Map(React.findDOMNode(this.refs.map))
36+
37+
this.setState({ map })
38+
}
39+
40+
method() {
41+
const { googleMaps } = this.props
42+
43+
return (
44+
<div ref="map"></div>
45+
)
46+
}
47+
}
48+
```
49+
50+
## Development
51+
52+
### Clean `lib` folder
53+
54+
```js
55+
npm run clean
56+
```
57+
58+
### Build `lib` folder
59+
60+
```js
61+
npm run build
62+
```
63+
64+
### Watch `src` folder
65+
66+
```js
67+
npm run watch
68+
```
69+
70+
### Lint `src` folder
71+
72+
```js
73+
npm run lint
74+
```
75+
76+
## License
77+
78+
See [MIT](./LICENCE)

package.json

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{
2+
"name": "react-google-maps-loader",
3+
"version": "1.0.0",
4+
"description": "React decorator to use google maps services into your react applications",
5+
"repository": {
6+
"type": "git",
7+
"url": "git+https://github.com/cedricdelpoux/react-google-maps-loader.git"
8+
},
9+
"keywords": [
10+
"react",
11+
"google",
12+
"maps",
13+
"googlemaps",
14+
"loader",
15+
"decorator"
16+
],
17+
"author": "Cédric Delpoux <cedric.delpoux@gmail.com>",
18+
"license": "MIT",
19+
"bugs": {
20+
"url": "https://github.com/cedricdelpoux/react-google-maps-loader/issues"
21+
},
22+
"homepage": "https://github.com/cedricdelpoux/react-google-maps-loader#readme",
23+
"main": "lib/index.js",
24+
"files": [
25+
"lib"
26+
],
27+
"dependencies": {
28+
"react": "^0.13.1",
29+
"scriptjs": "^2.5.7"
30+
},
31+
"devDependencies": {
32+
"babel": "~5.6.14",
33+
"babel-core": "~5.6.15",
34+
"babel-eslint": "~3.1.20",
35+
"babel-loader": "~5.1.4",
36+
"eslint": "~0.21.2",
37+
"eslint-loader": "~0.14.0",
38+
"eslint-plugin-react": "~2.6.4",
39+
"node-libs-browser": "~0.5.2",
40+
"webpack": "~1.10.1"
41+
},
42+
"scripts": {
43+
"clean": "rm -rf lib",
44+
"lint": "eslint src/",
45+
"build": "webpack --progress --colors",
46+
"watch": "webpack --progress --colors --watch",
47+
"prepublish": "npm run clean && npm run build"
48+
}
49+
}

src/index.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/* global google */
2+
3+
import React, { Component } from 'react'
4+
import scriptjs from 'scriptjs'
5+
6+
export default (options = {}) => (TargetComponent) => (
7+
class extends Component {
8+
state = {
9+
googleMaps: null,
10+
}
11+
12+
componentDidMount() {
13+
if (typeof window.google === 'undefined') {
14+
window.googleMapsLoaded = () => {
15+
scriptjs.done('google-maps-places')
16+
}
17+
18+
options.callback = 'googleMapsLoaded'
19+
20+
const queryString = Object.keys(options).reduce((result, key) => (
21+
options[key] !== null && options[key] !== undefined
22+
? (result += key + '=' + options[key] + '&')
23+
: result
24+
), '?').slice(0, -1)
25+
26+
scriptjs('https://maps.googleapis.com/maps/api/js' + queryString)
27+
scriptjs.ready('google-maps-places', () => {
28+
this.handleLoaded(google.maps)
29+
})
30+
} else {
31+
this.handleLoaded(google.maps)
32+
}
33+
}
34+
35+
handleLoaded(googleMaps) {
36+
this.setState({ googleMaps })
37+
}
38+
39+
render() {
40+
const { googleMaps } = this.state
41+
return googleMaps
42+
? <TargetComponent googleMaps={googleMaps} {...this.props} />
43+
: null
44+
}
45+
}
46+
)

webpack.config.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
var webpack = require('webpack')
2+
var path = require('path')
3+
4+
var sources = [
5+
path.resolve(__dirname, 'src'),
6+
]
7+
8+
module.exports = {
9+
entry: './src/index.js',
10+
output: {
11+
path: __dirname,
12+
filename: './lib/index.js',
13+
library: 'ReactSvgLineChart',
14+
libraryTarget: 'umd',
15+
},
16+
resolve: {
17+
extensions: ['', '.js']
18+
},
19+
module: {
20+
preLoaders: [
21+
{ test: /\.js?$/, include: sources, loader: 'eslint' },
22+
],
23+
loaders: [
24+
{ test: /\.js$/, include: sources, loader: 'babel' },
25+
],
26+
},
27+
externals: {
28+
react: {
29+
root: 'React',
30+
commonjs: 'react',
31+
commonjs2: 'react',
32+
amd: 'react',
33+
},
34+
},
35+
plugins: [
36+
new webpack.NoErrorsPlugin(),
37+
new webpack.optimize.OccurenceOrderPlugin(),
38+
new webpack.optimize.DedupePlugin(),
39+
new webpack.optimize.AggressiveMergingPlugin(),
40+
new webpack.optimize.UglifyJsPlugin({
41+
compress: {
42+
warnings: false,
43+
},
44+
}),
45+
]
46+
}

0 commit comments

Comments
 (0)