Forem: Claudio Cortese

Let's Build an Address Autocomplete in ReactJS

Claudio Cortese — Tue, 14 Jan 2020 09:16:07 +0000

Times to times we need to ask the user to provide us with an address.
It might be because we are gathering shipping information, for example. 📦

Anyway, we are in need of accurate results but, guess what?

We do not trust our users, of course. 😂

So, how do you obtain an accurate address out of a distracted user which doesn't really pay attention? 🤔

One solution is to use an address autocomplete so that a partial address like via cervantes 55 would be expanded to its correct form Italia, Napoli, Via Miguel Cervantes De Saavedra, 55 without the user writing it all down by himself. 😎

A good example of an address autocomplete is Algolia Places.

Actually, we will come up with something that resembles it!

As a matter of fact, I'm going to show you how to build such a component with ReactJS and the help of use-here-api, a library that exposes a collection of convenient hooks that let you easily integrate HERE RESTful API services in your projects.

If you want to learn more about use-here-api, please, take a look at this post. 🤓

A Collection of Useful React Hooks for Geocoding Purposes and More

Claudio Cortese ・ Dec 31 '19

#react #showdev #webdev #typescript

Without further due, let's get our hands dirty!

Let's set up the project 👨‍💻

First of all, we should create a basic React project.

To accomplish this task, simply open up a terminal and type in the following:

yarn create react-app address-autocomplete --template typescript

Note that it may take a couple of minutes for this command to complete.

We will be using Sass, so we need to install node-sass as well:

yarn add node-sass

We are now going to delete a couple of unneeded files, namely:

logo.svg
App.css
App.test.tsx

Now, before actually writing some real code, we are going to create a new folder components inside src and, in that folder, create another one called AddressAutocomplete.

Inside that folder we are going to create a couple of more files:

package.json

{
  "main": "AddressAutocomplete.tsx"
}

AddressAutocomplete.tsx

import React, { FC } from 'react'
import Styles from './AddressAutocomplete.module.scss';

const AddressAutocomplete: FC = () => <input placeholder="Enter an address" />

export default AddressAutocomplete

AddressAutocomplete.module.scss

Finally, let's open up App.tsx and modify it like so:

import React, { FC } from 'react';
import AddressAutocomplete from './components/AddressAutocomplete';

const App: FC = () => (
  <AddressAutocomplete
    onAutocomplete={(address: any) => {
      console.log(address);
    }}
  />
);

export default App;

You should come up with a folder structure just like this image below:

Ready to play with `use-here-api` 🗺️

It's now time to

yarn add @cloudpower97/use-here-api

Create a .env file at the root of your project and type in the following:

REACT_APP_HERE_APP_CODE="..."
REACT_APP_HERE_APP_ID="..."

Obviously, make sure to actually replace "..." with the correct pieces of information. 👀

We are now going to authenticate our requests towards HERE API with the help of configureAutentication.

import {
  configureAuthentication,
  useAutocomplete
} from '@cloudpower97/use-here-api';

const {
  REACT_APP_HERE_APP_ID: app_id,
  REACT_APP_HERE_APP_CODE: app_code
} = process.env;

if (app_code && app_id) {
  configureAuthentication({
    app_code,
    app_id
  });
}

From now on, every request we make with any of the hooks exposed by use-here-api is going to use the provided credentials. 🔐

To learn more about credentials and authentication methods, you can read this.

Creating the interface 🧱

We should now create an interface to define AddressAutocomplete props

interface AddressAutocompleteProps extends HTMLAttributes<HTMLInputElement> {
  value?: string;
  onAutocomplete?: Function;
}

onAutocomplete is an optional callback that is going to be invoked, if provided, once the user selects one of the results.

As we are going to spread every other prop in an input element, we extends HTMLAttributes<HTMLInputElement>.

Implementing the component 🛠️

Now, as use-here-api is a typesafe wrapper around HERE API, we can also have a look at the official documentation, that reads:

The HERE Geocoder Autocomplete API is a REST API that you can integrate into web applications to help users obtain better results for address searches with fewer keystrokes. Spatial and region filters can be used to return suggestions with greater relevance to end-users, such as results that are within a specified country or in the proximity of the current location.

The Geocoder Autocomplete API retrieves a complete address and an ID. You can subsequently use the Geocoder API to geocode the address based on the ID and thus obtain the geographic coordinates of the address.

-- Geocoder Autocomplete API

And, if we head over to API Reference we will see that the only required parameter is query, the actual search text.

For this component, we are going to use beginHighlight and endHighlight as well, in order to highlight the matched characters.

The wrapper around this API is exposed through useAutocomplete hook. 🎣

At this point, we just need to make sure that we make use of this hook with the query params fed with user input.

const AddressAutocomplete: FC<AddressAutocompleteProps> = ({
  value = '',
  placeholder = 'Enter an address',
  onAutocomplete,
  ...props
}) => {
  const [{ data }, fetchSuggestions] = useAutocomplete();
  const [location, setLocation] = useState<string>(value);
  const [isMenuOpen, setMenuOpen] = useState<boolean>(false);

  useEffect(() => {
    if (data) {
      setMenuOpen(true);
    }
  }, [data]);

  return (
    <>
      <div className={Styles.SuggestionWrapper}>
        <input
          placeholder={placeholder}
          onChange={({ currentTarget: { value } }) => {
            setLocation(value);

            if (value.length >= 3) {
              fetchSuggestions({
                query: value,
                beginHighlight: '<b>',
                endHighlight: '</b>'
              });
            }
          }}
          className={Styles.SuggestionInput}
          value={location}
          tabIndex={0}
          {...props}
        />
        {data&& isMenuOpen && (
          <ul className={Styles.SuggestionsList}>
            {data?.suggestions?.length === 0 && (
              <li className={Styles.SuggestionItem}>No results found...</li>
            )}
            {data?.suggestions?.map(suggestion => (
              <li
                key={suggestion.locationId}
                className={Styles.SuggestionItem}
                onClick={() => {
                  setLocation(suggestion.label.replace(/<[^>]+>/g, ''));
                }}
                tabIndex={1}
              >
                <span
                  className={Styles.SuggestionLabel}
                  dangerouslySetInnerHTML={{ __html: suggestion.label }}
                />{' '}
                <span
                  className={Styles.AdditionalSuggestion}
                  dangerouslySetInnerHTML={{
                    __html: `${suggestion.address.county}, ${suggestion.address.state}, ${suggestion.address.country}`
                  }}
                />
              </li>
            ))}
          </ul>
        )}
      </div>
    </>
  );
};

Retrieve Geographic Coordinates 📍

The component is getting shape!

The user can now type in a partial address and then select the correct one in the dropdown filled with results retrieved from the HERE API!

However, we should now retrieve geographic coordinates for the selected address as well. 🌍

As a matter of fact, as also noted in the guide section,

after the user has selected a suggestion, you can retrieve the location details such as the geographic coordinates via the HERE Geocoder API, using look-up by locationId.

In order to accomplish this task, we are going to use another hook exposed by use-here-api, namely useForwardGeocoding.

const [{ data: geocodeData }, fetchLocation] = useForwardGeocoding();


useEffect(() => {
    if (geocodeData) {
        onAutocomplete && 
   onAutocomplete(geocodeData.response.view[0].result[0]);
    }
}, [geocodeData, onAutocomplete]);

We just need to call fetchLocation when clicking on a result, providing the locationid of the latter.

<li
  key={suggestion.locationId}
  className={Styles.SuggestionItem}
  onClick={() => {
    setLocation(suggestion.label.replace(/<[^>]+>/g, ''));
    setMenuOpen(false);
    fetchLocation({
      locationid: suggestion.locationId,
      jsonattributes: 1
    });
  }}
  tabIndex={1}
>
  <span
    className={Styles.SuggestionLabel}
    dangerouslySetInnerHTML={{ __html: suggestion.label }}
  />{' '}
  <span
    className={Styles.AdditionalSuggestion}
    dangerouslySetInnerHTML={{
      __html: `${suggestion.address.county}, ${suggestion.address.state}, ${suggestion.address.country}`
    }}
  />
</li>

Add the needed styles 💅

We are now going to add some styles to our component.

Let's get straight to AddressAutocomplete.module.scss:

.SuggestionWrapper {
  position: relative;
  width: 100%;
}

.SuggestionInput {
  line-height: 1.15;
  overflow: visible;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #9e9e9e;
  border-radius: 0;
  outline: none;
  height: 3rem;
  width: 100%;
  font-size: 16px;
  margin: 0 0 8px 0;
  padding: 0;
  box-shadow: none;
  box-sizing: content-box;
  transition: box-shadow .3s, border .3s;
}

.SuggestionsList {
  background-color: white;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  left: 0;
  list-style-type: none;
  margin: 0px;
  max-height: 225px;
  overflow: auto;
  padding: 0;
  position: absolute;
  top: 49px;
  user-select: none;
  width: 100%;
  z-index: 2;
}

.SuggestionItem {
  cursor: pointer;
  padding: 14px 16px;

  &:hover,
  &:focus {
    background-color: #eee;
  }
}

.SuggestionLabel {
  font-size: medium;
  margin-left: 20px;
}

.AdditionalSuggestion {
  color: grey;
  font-size: small;
  margin-left: 10px;
}

.SuggestionIcon {
  color: grey;
  font-size: 25px !important;
  vertical-align: bottom;
}

.ToggleSuggestionListButton {
  color: gray;
  cursor: pointer;
  position: absolute;
  right: 15px;
  top: 15%;
  transition: transform ease-in-out 0.25s;

  &:global(.open) {
    transform: rotate(180deg);
  }

  &:hover,
  &:focus {
    color: var(--dark-green);
  }
}

Final touches ✌️

We now have a fully styled and functional component! 🥳

Just let's add some icons as well.

I'm going to create another component inside, namely SuggestionIcon, that is going to receive matchLevel as the only prop and will return a proper icon based on it.

I'm going to use FontAwesome icons, so let's install it:

yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

and then add these lines of code:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
  faRoad,
  faCity,
  faMapMarkerAlt,
  faAngleDown
} from '@fortawesome/free-solid-svg-icons';

interface SuggestionIconProps {
  matchLevel: string;
}

const SuggestionIcon: FC<SuggestionIconProps> = ({ matchLevel }) => {
  switch (matchLevel) {
    case 'street':
      return (
        <FontAwesomeIcon
          icon={faRoad}
          size="2x"
          className={Styles.SuggestionIcon}
          fixedWidth
        />
      );

    case 'city':
      return (
        <FontAwesomeIcon
          icon={faCity}
          size="2x"
          className={Styles.SuggestionIcon}
          fixedWidth
        />
      );

    default:
      return (
        <FontAwesomeIcon
          icon={faMapMarkerAlt}
          size="2x"
          className={Styles.SuggestionIcon}
          fixedWidth
        />
      );
  }
};

and then, simply add this component as follow:

{data?.suggestions?.map(suggestion => (
              <li
                key={suggestion.locationId}
                className={Styles.SuggestionItem}
                onClick={() => {
                  setLocation(suggestion.label.replace(/<[^>]+>/g, ''));
                  setMenuOpen(false);
                  fetchLocation({
                    locationid: suggestion.locationId,
                    jsonattributes: 1
                  });
                }}
                tabIndex={1}
              >
                <SuggestionIcon matchLevel={suggestion.matchLevel} />
                <span
                  className={Styles.SuggestionLabel}
                  dangerouslySetInnerHTML={{ __html: suggestion.label }}
                />{' '}
                <span
                  className={Styles.AdditionalSuggestion}
                  dangerouslySetInnerHTML={{
                    __html: `${suggestion.address.county}, ${suggestion.address.state}, ${suggestion.address.country}`
                  }}
                />
              </li>
            ))}

Let's now add an icon to open and close the dropdown results menu as well:

{data?.suggestions?.length && (
  <FontAwesomeIcon
    icon={faAngleDown}
    size="2x"
    className={cx(Styles.ToggleSuggestionListButton, {
      open: isMenuOpen
    })}
    onClick={() => {
      setMenuOpen(prevMenuOpen => !prevMenuOpen);
    }}
  />
)}

All set!👌

Congratulations, you have just created an address autocomplete!

As you can see, with the help of use-here-api we were able to build a complex component with ease 😎

I've created a CodeSandbox where you can play with the code.

Feel free to fork and modify it as you wish! 😉

Note: please, do remember to replace REACT_APP_HERE_APP_CODE and REACT_APP_HERE_APP_ID in .env

What's next? 🤔

There is still place to further improve this component, like using throttling and/or debouncing techniques to avoid hampering the performance.

We can (actually should 😅) also enhance accessibility, following ARIA design pattern for a dropdown select.

Let me know in a comment down here if you would like me to expand upon these concepts! 🦄

Before leaving, I wanted to thank you for making it all the way down here! 🤗

Don't forget to {...❤️} if you enjoyed this post! 🤭

That's all for this post, see you next one and ... Happy hacking until then! 👨‍💻

Some Useful Tips And Tricks About Form Validation

Claudio Cortese — Wed, 08 Jan 2020 12:03:57 +0000

As time goes by, sooner or later, every developer has been tasked with building a form. 🛠️

Well, as far as I'm concerned, that's not one of the funniest things to do. 😅

But it turns out that even the simpler of websites out there is going to need at least a basic contact form. 🤷‍♂️

And, sometimes, there are cases where you are building a really complex and big application with forms everywhere. 🤓

They might be so big that you have to split them into multiple steps! 😮

But, in this post, I'm not going to show you a specific way of building a form nor how to split it into multiple steps, for example.

I'm going to try to be framework agnostic as well, but I might use a couple of lines of React here and there, as that's what I mostly use day by day.

Anyway, I promise you that this will not retain you from using what I will show you in any other framework you might happen to use or even Vanilla JS!

Well, at this point you may be wondering what I'm precisely going to talk about, then? 🧐

Data Validation ✅/❌

In computer science, data validation is the process of ensuring data have undergone data cleansing to ensure they have data quality, that is, that they are both correct and useful.

-- Wikipedia

To my advice, one of the most important task we have while building a form is to ensure that the data is proactively validated.

Of course, there MUST be validation on the backend as well, that's mandatory. ☝️

Never validate data only on the front-end! This might be dangerous. ☢️

But, actually, the real reason why you should do that, is to preserve the mental health of your user. Really! 😂

As a matter of fact, as a user, I often run into long and/or complex and evil form that gives no hint to me about what I should do next or if the data that I provided is correct. 😈

These are some question that I'm sure even you had while filling-out this kind of forms:

1) Is there life on mars? 👽
2) Will the code I wrote yesterday compile? 🤔
3) But most importantly... Why the hell is the f**** submit button disabled?!? 🤬

Well, to be honest sometimes happens that the submit button is ALWAYS enabled (really?). 😶

As a developer, I strive to do my best to avoid these frustrating situations.

If only we could make the user “fail fast, fail often”...

What if I told you we can accomplish this task easily?

Yup to the rescue 🚑

Yup is a JavaScript object schema validator and object parser.
-- Yup GitHub Page

Install

yarn add yup

If you are using TypeScript you should install @types as well.

yarn add -D @types/yup

Play with it! 👨‍💻

We are now ready to get our hands dirty!

For the sake of it, I'm going to show you how to validate a simple contact form.

Let's pretend we require the user to provide us these pieces of information:

Name
Surname
Birth Date
Sex
Years Of Proficiency in Web Development
Email
Phone Number
A link to a portfolio

All of the fields are required but Sex and Phone Number.

We should end up writing this schema with Yup:

Yup.object({
  name: Yup.string().required(),
  surname: Yup.string().required(),
  birthDate: Yup.date().required(),
  sex: Yup.mixed().oneOf(['Male', 'Female']),
  yearsOfProficiency: Yup.number().positive().required("Don't be shy!"),
  email: Yup.string().email().required(),
  phoneNumber: Yup.string(),
  portfolio: Yup.string().url()
})

Straightforward, right?

But, what if we want to make a property required based on the value of another field?

Let's say that we would like to be able to contact the user in some way: we don't care if by email or by calling them.

Thereafter, we have to make sure that at least the email OR the phone is provided.

Well, that's easily done with this schema:

Yup.object({
  name: Yup.string().required(),
  surname: Yup.string().required(),
  birthDate: Yup.date().required(),
  sex: Yup.mixed().oneOf(["Male", "Female"]),
  yearsOfProficiency: Yup.number()
    .positive()
    .required("Don't be shy!"),
  email: Yup.string()
    .email(),
  phoneNumber: Yup.string()
    .test(
      "at-least-email-or-phone-number",
      "You should provide at least either an email or a phone number",
      function(value) {
        const email = this.parent.email;

        if (!email || value ? .length === 0) {
          return false;
        }

        return true;
      }
    ),
  portfolio: Yup.string().url()
})

Whit this schema in place, if we were to validate an object of this shape:

{
  name: 'Jimmy',
  surname: 'Hopkins',
  sex: 'Male',
  age: 28,
  yearsOfProficiency: 2,
  birthDate: '1991-04-29T22:00:00.000Z'
}

We would get a nice Validation Error:

ValidationError: You should provide at least either an email or a phone number

Password example 🔐

Another example that came to my mind is the one where the user has to enter a password twice as a mean of security.

Yup.object({
  password: Yup.string().required('Password is required'),
  confirmPassword: Yup.string()
    .oneOf([Yup.ref('password'), null], "Passwords must match")
    .required('Password confirm is required')
})

Doing that we make sure that the two passwords are exactly the same!

Profit! 😎

All of that being said, you should be now able to validate a complex shaped object with ease.

If you are using React, you might want to try Formik or React Hook Form.
These two libraries are going to make your life so much easier while building forms, and leverage the possibility to use Yup as a schema validator!

That's all for this post, see you next one!

Happy hacking until then! 👨‍💻

A Collection of Useful React Hooks for Geocoding Purposes and More

Claudio Cortese — Tue, 31 Dec 2019 17:01:09 +0000

For a project I'm currently involved in, we were looking for a geocoding service.

For those who don't know, geocoding is the process of converting an address like "Via Miguel Cervantes de Saavedra" into geographic coordinates (like latitude 40.841372 and longitude 14.2493221) and vice-versa. 🤓

There is a couple of different APIs available out there, like Google Map Platforms and OpenCage Geocoding API.

However, for different reasons, none of them was suitable for this particular project. 🤷‍♂️

So a technology scouting started and took us far away from our offices, approximately near 38.7686466,-9.0954215. 🗺️

As a matter of fact, it all started during Web Summit 2019, which took place in Lisbon back this November.

To be honest, in that particular moment we were not looking for a Geocoding service, but as you may know, things happen when you least expect it (or maybe we had to expect it 😅).

The arena was really outstanding and there were a lot of thrilling activities to do and things to learn!

There is no better time than an event of this proportion to collect our beloved ~~hats~~ gadgets and stickers as well (the one that everyone at the office wants but only you have, AH! 😎).

Among the many stands, our attention was captured by one in particular...

We were here and they were HERE!

What a coincidence.😏

I started playing with the API immediately and I was amazed by how fast and precise the responses were, also when providing really small chunks of information. 😮

We talked to a few people there who showed us some demo and gave us some information about the available services and the proposed plans.

Do you believe that the Freemium plan gives you stunning 250K Transactions per month? 🤩

When I went back to Naples it was time to get my hands dirty!👨‍💻

Time to code!

Do you recall the project I was working on?

We are using React.js, and I, in particular, am a big fan and an early adopter of hooks. 🎣

You might guess what happened later...

Of course one of the first things to do was to read the HERE API documentation and I immediately learned that there are two options:
1. RESTFul API
2. JS Client

But here is the catch! ☝️

Not every service is available through the JS Client but all of them are exposed as RESTful microservices.

For example, if one had to build an Autocomplete component or fetch Weather information around a location, the client would be not useful at all. 🙄

Obviously I decided to use the RESTFul API.

But this was not the only reason why I ditched the client.

We made a big decision almost half a year ago and decided to use TypeScript in this project.

And I’ve to admit, that’s one of the best decisions we could make! 😍

Although it has a really steep learning curve (it can be a nightmare at first), once you are comfortable with it you only gain a lot of benefits.

It turned out that the client has no @types to be installed (AFAIK) and I was not very comfortable with the idea to work with it.

use-here-api

All these reasons brought me to the creation of use-here-api, a collection of convenient hooks that let you easily integrate HERE RESTful API services in your React.js projects.

At the moment the available hooks are:

Geocoding and Search
- useForwardGeocoding - Submit an address to request the corresponding geocoordinates. Addresses may use structured input or free-form search strings with complete or partial address information. The more detailed the address you submit, the higher the potential match accuracy.
- useReverseGeocoding - Submit a geocoordinate and an optional radius to request the corresponding address.
- useAutocomplete - Get better search suggestions for your addresses with fewer keystrokes.
useWeather - Give insights into real-time weather forecasts, alerts, and astronomical info for any location.
Places
- usePlacesAutosuggest - Provides you a lists of suggested search terms, instants results and refined search links related to a given (partial) search term and location context. This is used to help users save time, iterate on their searches, and get the results.

They are as easy to work with as this little snippet:

import React, { FC, useState, useEffect } from 'react';
import { configureAuthentication, useForwardGeocoding } from '@cloudpower97/use-here-api';

const Demo: FC<any> = () => {
  const [searchtext, setSearchtext] = useState<string>(
    '200 S Mathilda Ave, Sunnyvale, CA'
  );

  configureAuthentication({
    app_id: '...',
    app_code: '...',
  });

  const [{ data, loading, error }, fetchLocation] = useForwardGeocoding();

  useEffect(() => {
    fetchLocation({
      searchtext,
      jsonattributes: 1,
    });
  }, [searchtext]);

  return (
    <>
      <div>
        <input
          placeholder="Enter an address"
          onChange={({ currentTarget: { value } }) => setSearchtext(value)}
          value={searchtext}          
        />       
      </div>
      {loading && !error && <p>Loading data...</p>}
      {error && <p>{error.message}</p>}
      {data && !loading && (
        <ul>
          {data.response.view[0]?.result.map(({ location }) => {
            const { address, navigationPosition } = location;
            return (
              <li key={location.locationId}>
                {address.label} - {navigationPosition[0].latitude},
                {navigationPosition[0].longitude}
              </li>
            );
          })}
        </ul>
      )}
    </>
  );
};

Of course, there is a lot of work still to do, and until we hit a 1.0 release the API is subject to changes and improvements. 🛠️

I invite you to contribute in any form to the project as you see it fit.

Oh, and if you find this project useful make sure to leave a star as well! 🤗

CloudPower97 / use-here-api

Convenient hooks which let you easily integrate HERE RESTful API services in your React.js projects.

use-here-api

^{Collection of convenient React Hooks which lets you easily use HERE RESTful API services}

npm i use-here-api

yarn add use-here-api

Table of Contents

Overview

use-here-api exposes convenient hooks which lets you easily integrate HERE RESTful API services in your React.js projects.

Documentation

Usage

Prior using any of the exposed hook you should provide credentials to authenticate your requests.

As noted in the Authentication and Authorization Developer Guide there are three supported authentication credential types:

API Key Credentials

import { configureAuthentication } from '@cloudpower97
/use-here-api';
configureAuthentication({
  apiKey: '...'
});

OAuth 2.0 Token Credentials

import { configureAuthentication } from '@cloudpower97
/use-here-api';

configureAuthentication({
  token: '...'
});

APP CODE Credentials

import { configureAuthentication } from '@cloudpower97
/use-here-api';

configureAuthentication({
  app_id: '...',
  app_code: '...',
});

With…

View on GitHub

Thank you for reading this post and make it all the way down here!

See you next year! 🥳

Forem: Claudio Cortese

Let's Build an Address Autocomplete in ReactJS

A Collection of Useful React Hooks for Geocoding Purposes and More

Claudio Cortese ・ Dec 31 '19

Let's set up the project 👨‍💻

Ready to play with use-here-api 🗺️

Creating the interface 🧱

Implementing the component 🛠️

Retrieve Geographic Coordinates 📍

Add the needed styles 💅

Final touches ✌️

All set!👌

What's next? 🤔

Some Useful Tips And Tricks About Form Validation

Data Validation ✅/❌

Yup to the rescue 🚑

Install

Play with it! 👨‍💻

Password example 🔐

Profit! 😎

A Collection of Useful React Hooks for Geocoding Purposes and More

Time to code!

use-here-api

CloudPower97 / use-here-api

Convenient hooks which let you easily integrate HERE RESTful API services in your React.js projects.

use-here-api

Overview

Documentation

Usage

Ready to play with `use-here-api` 🗺️