use-google-directions

Small library that provides hooks for google direction api

This package is using lbundle as bundler ✨

🚀 Motivation

There was a library to render directions on react native, it has some limitations (like not being able to get more information from the API call to google), and the library had no updates for a long time and no way to contribute, so created this package which takes other approach for giving data.

💾 install

This package requires the following packages @tanstack/react-query>=5.0.0, axios>=1.0.0 and react>=16.0.0, so make sure to have them in your project.

NPM registry

# npm
npm i -D use-google-directions

# yarn
yarn add -D use-google-directions

# pnpm
pnpm i -D use-google-directions

# bun
bun i -D use-google-directions

JSR registry

# deno
deno add -D @mrii/use-google-directions

# jsr
npx jsr add -D @mrii/use-google-directions

🔧 Usage

import { useGoogleMapsDirectionsQuery } from 'use-google-directions';

// or with jsr
// import { useGoogleMapsDirectionsQuery } from '@mrii/use-google-directions';

const Component: React.FC = () => {
  /* ... */

  // react-query Query result
  const focusedTripDirectionsQuery = useGoogleMapsDirectionsQuery({
    origin: {
      latitude: 1,
      longitude: 1,
    },
    destination: {
      latitude: 3,
      longitude: 3,
    },

    // many other props
  });

  // the result from google API
  const response = focusedTripDirectionsQuery.data?.data;

  // points that can be drawn using Maps Polyline
  const points = useDirectionPolylinePoints({ response, precision: 'hight' });

  // the distance of the route in meters
  const distance = useDirectionDistanceInM({ response });

  // the duration of the route in ms
  const duration = useDirectionDurationInMs({ response });

  // polyline using react-native-maps Polyline
  const reactNativeMapsPolyline = (
    <Polyline coordinates={points} strokeWidth={4} strokeColor='#0007' />
  );
};

🧰 API