react-maps-loader
TypeScript icon, indicating that this package has built-in type declarations

0.2.2 • Public • Published

React Maps Loader

Easily load and consume Google's Maps JavaScript API.

Usage

This library exports a Provider that will load the API for you and put it on the window. You'd probably want to use it somewhere around the root of your app, like so:

import { MapsProvider } from 'react-maps-loader';

import App from './App'; // your beautiful app!

const Root = () => (
  <MapsProvider apiKey="YOUR_API_KEY" libraries={['places']}>
    <App />
  </MapsProvider>
);

Somewhere nested inside the App component, you may have consumers that get the google.maps prop like so:

import { MapsConsumer } from 'react-maps-loader';

import EmbeddedMap from './EmbeddedMap';
import MapContainer from './MapContainer';

const Map = ({ place }) => (
  <MapsConsumer>
    {maps =>
      maps ? (
        <EmbeddedMap
          containerElement={<MapContainer />}
          loadingElement={<div style={{ height: '100%' }} />}
          mapElement={<div style={{ height: '100%' }} />}
          place={place}
        />
      ) : (
        <div>Loading!</div>
      )
    }
  </MapsConsumer>
);

Package Sidebar

Install

npm i react-maps-loader

Weekly Downloads

0

Version

0.2.2

License

MIT

Unpacked Size

17.5 kB

Total Files

16

Last publish

Collaborators

  • jmagrippis