Skip to content

Add React 16 to peerDependencies #173

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
auser merged 7 commits into from
Apr 7, 2018
Merged

Add React 16 to peerDependencies #173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
361c7ea
Add React 16 to peerDependencies
sonaye Mar 30, 2018
b9e2db4
Clean up examples and remove createClass
sonaye Apr 6, 2018
c9ccaa2
Remove history from dependencies
sonaye Apr 6, 2018
01ad915
Add dist to gitignore
sonaye Apr 6, 2018
83f945f
Move history to devDependencies
sonaye Apr 6, 2018
64607e4
Remove createClass from readme
sonaye Apr 6, 2018
4b3cf70
Revert "Add dist to gitignore"
sonaye Apr 6, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
163 changes: 77 additions & 86 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

<p align="center">
<img src="resources/readme/fullstackreact-google-maps-tutorial.png" alt="Fullstack React Google Maps Tutorial" />
</p>
Expand Down Expand Up @@ -38,6 +37,7 @@ If you want to add a loading container _other than the default_ loading containe
const LoadingContainer = (props) => (
<div>Fancy loading container!</div>
)

export default GoogleApiWrapper({
apiKey: (YOUR_GOOGLE_API_KEY_GOES_HERE),
LoadingContainer: LoadingContainer
Expand All @@ -50,7 +50,7 @@ export default GoogleApiWrapper({
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';

export class MapContainer extends Component {
render() {
render() {
return (
<Map google={this.props.google} zoom={14}>

Expand Down Expand Up @@ -127,58 +127,55 @@ The `<Map />` component handles events out of the box. All event handlers are op
When the `<Map />` instance has been loaded and is ready on the page, it will call the `onReady` prop, if given. The `onReady` prop is useful for fetching places or using the autocomplete API for places.

```javascript
React.createClass({
fetchPlaces: function(mapProps, map) {
const {google} = mapProps;
const service = new google.maps.places.PlacesService(map);
// ...
},
render: function() {
return (
<Map google={this.props.google}
onReady={this.fetchPlaces}
visible={false}>
<Listing places={this.state.places} />
</Map>
)
}
});
fetchPlaces(mapProps, map) {
const {google} = mapProps;
const service = new google.maps.places.PlacesService(map);
// ...
}

render() {
return (
<Map google={this.props.google}
onReady={this.fetchPlaces}
visible={false}>
<Listing places={this.state.places} />
</Map>
)
}
```

#### onClick

To listen for clicks on the `<Map />` component, pass the `onClick` prop:

```javascript
React.createClass({
mapClicked: function(mapProps, map, clickEvent) {
// ...
},
render: function() {
return (
<Map google={this.props.google}
onClick={this.mapClicked} />
)
}
});
mapClicked(mapProps, map, clickEvent) {
// ...
}

render() {
return (
<Map google={this.props.google}
onClick={this.mapClicked} />
)
}
```

#### onDragend

When our user changes the map center by dragging the Map around, we can get a callback after the event is fired with the `onDragend` prop:

```javascript
React.createClass({
centerMoved: function(mapProps, map) {
// ...
},
render: function() {
return (
<Map google={this.props.google}
onDragend={this.centerMoved} />
)
}
});
centerMoved(mapProps, map) {
// ...
}

render() {
return (
<Map google={this.props.google}
onDragend={this.centerMoved} />
)
}
```

### Visibility
Expand Down Expand Up @@ -245,51 +242,52 @@ The `<Marker />` component listens for events, similar to the `<Map />` componen
You can listen for an `onClick` event with the (appropriately named) `onClick` prop.

```javascript
const WithMarkers = React.createClass({
onMarkerClick: function(props, marker, e) {
},
render: function() [
return (
<Map google={this.props.google}>
<Marker onClick={this.onMarkerClick}
name={'Current location'} />
</Map>
)
]
});
onMarkerClick(props, marker, e) {
// ..
}

render() {
return (
<Map google={this.props.google}>
<Marker onClick={this.onMarkerClick}
name={'Current location'} />
</Map>
)
}
```

#### mouseover

You can also pass a callback when the user mouses over a `<Marker />` instance by passing the `onMouseover` callback:

```javascript
const Container = React.createClass({
onMouseoverMarker: function(props, marker, e) {
},
render: function() [
return (
<Map google={this.props.google}>
<Marker onMouseover={this.onMouseoverMarker}
name={'Current location'} />
</Map>
)
]
});
onMouseoverMarker(props, marker, e) {
// ..
}

render() {
return (
<Map google={this.props.google}>
<Marker onMouseover={this.onMouseoverMarker}
name={'Current location'} />
</Map>
)
}
```

### Polygon

To place a polygon on the Map, set `<Polygon />` as child of Map component.

```javascript
render: function() {
var triangleCoords = [
render() {
const triangleCoords = [
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}
];

return(
<Map google={this.props.google}
style={{width: '100%', height: '100%', position: 'relative'}}
Expand All @@ -316,13 +314,14 @@ The `<Polygon />` component listens to `onClick`, `onMouseover` and `onMouseout`
To place a polyline on the Map, set `<Polyline />` as child of Map component.

```javascript
render: function() {
var triangleCoords = [
render() {
const triangleCoords = [
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}
];

return(
<Map google={this.props.google}
style={{width: '100%', height: '100%', position: 'relative'}}
Expand Down Expand Up @@ -356,37 +355,29 @@ You can use a `position` prop or connect the `<InfoWindow />` component directly
```javascript
//note: code formatted for ES6 here
export class MapContainer extends Component {
constructor(props) {
super(props);
this.state = {
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {},
}
state = {
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {},
};

// binding this to event-handler functions
this.onMarkerClick = this.onMarkerClick.bind(this);
this.onMapClicked = this.onMapClicked.bind(this);
}

onMarkerClick: function(props, marker, e) {
onMarkerClick = (props, marker, e) =>
this.setState({
selectedPlace: props,
activeMarker: marker,
showingInfoWindow: true
});
},

onMapClicked: function(props) {
onMapClicked = (props) => {
if (this.state.showingInfoWindow) {
this.setState({
showingInfoWindow: false,
activeMarker: null
})
}
},
};

render: function() {
render() {
return (
<Map google={this.props.google}
onClick={this.onMapClicked}>
Expand All @@ -403,7 +394,7 @@ export class MapContainer extends Component {
</Map>
)
}
});
}
```

### Events
Expand Down
75 changes: 37 additions & 38 deletions examples/Container.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,84 +1,83 @@
import React from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import {Link} from 'react-router';
import GitHubForkRibbon from 'react-github-fork-ribbon';
import React, { Component } from 'react';

let GoogleApiWrapper;
if (__IS_DEV__) {
GoogleApiWrapper = require('../src/index').GoogleApiWrapper;
} else {
GoogleApiWrapper = require('../dist').GoogleApiWrapper;
}
import GitHubForkRibbon from 'react-github-fork-ribbon';
import PropTypes from 'prop-types';
import { Link } from 'react-router';

import styles from './styles.module.css';

export const Container = React.createClass({
propTypes: {
const GoogleApiWrapper = __IS_DEV__
? require('../src/index').GoogleApiWrapper
: require('../dist').GoogleApiWrapper;

class Container extends Component {
static propTypes = {
children: PropTypes.element.isRequired
},
};

contextTypes: {
static contextTypes = {
router: PropTypes.object
},
};

renderChildren = () => {
const { children } = this.props;

renderChildren: function() {
const {children} = this.props;
if (!children) return;

const sharedProps = {
google: this.props.google,
loaded: this.props.loaded
};
return React.Children.map(children, c => {
return React.cloneElement(c, sharedProps, {});
});
},

render: function() {
const {routeMap, routeDef} = this.props;
const {router} = this.context;
return React.Children.map(children, child =>
React.cloneElement(child, sharedProps, {})
);
};

render() {
const { routeMap, routeDef } = this.props;

const c = this.renderChildren();
return (
<div className={styles.container}>
<GitHubForkRibbon
href="//github.com/fullstackreact/google-maps-react"
target="_blank"
position="right"
>
target="_blank">
Fork me on GitHub
</GitHubForkRibbon>

<div className={styles.wrapper}>
<div className={styles.list}>
<ul>
{Object.keys(routeMap).map(key => {
return (
<Link to={key} activeClassName={styles.active} key={key}>
<li>{routeMap[key].name}</li>
</Link>
);
})}
{Object.keys(routeMap).map(key => (
<Link activeClassName={styles.active} key={key} to={key}>
<li>{routeMap[key].name}</li>
</Link>
))}
</ul>
</div>

<div className={styles.content}>
<div className={styles.header}>
<h1>{routeDef && routeDef.name} Example</h1>

<h2>
<a href="https://github.com/fullstackreact/google-maps-react/blob/master/README.md">
Readme
</a>
</h2>
</div>
{c}

{this.renderChildren()}
</div>
</div>
</div>
);
}
});
}

const Loading = () => <div>Fancy loading container</div>;

const Loading = props => <div>Fancy loading container</div>;
export default GoogleApiWrapper({
apiKey: __GAPI_KEY__,
libraries: ['places', 'visualization'],
Expand Down
Loading