@qc/react-geocoder

    0.0.0-alpha • Public • Published

    @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

    Maintainers

    License

    ISC

    Install

    npm i @qc/react-geocoder

    DownloadsWeekly Downloads

    1

    Version

    0.0.0-alpha

    License

    ISC

    Unpacked Size

    21.7 kB

    Total Files

    4

    Last publish

    Collaborators

    • qc