@qc/react-geocoder

Makes geocoding in React easy.

Installation

npm install --save @qc/react-geocoder

or

yarn add @qc/react-geocoder

Usage

The Geocoder component uses the children property as a render prop. That is, it expects a single nested child that is a function. This function will be passed an object with several properties.

import React from 'react';

import Geocoder from '@qc/react-geocoder';

class Example(props) {

  state = {
    address: '',
  };

  handleAddressChange = evt => {
    this.setState({
      address: evt.target.value,
    })
  }

  render() {
    const { address } = this.state;
    return (
      <div>
        <label>
          Address
          <input type="text" onChange={this.handleAddressChange} value={address} />
        </label>
        <Geocoder apiKey="YOUR_API_KEY" address={address}>
          {
            ({ error, loading, results }) => {
              if (loading) {
                return <p>Loading...</p>;
              }
              if (error) {
                return <p>Error: {error.message}</p>;
              }
              if (results) {
                if (results.length === 0) {
                  return <p>No results match "{address}".</p>
                }
                return (
                  <ul>
                    {results.map(result => <li>{result.formatted_address}</li>)}
                  </ul>
                );
              }
            }
          }
        </Geocoder>
      </div>
    );
  }
}

Other Packages from QC

• @qc/react-block
• @qc/react-conditionals
• @qc/react-layer
• @qc/react-page

Maintainers

• Danny Hurlburt

License

ISC