useSortCitiesByDistance
is a simple react hook that enables you to sort an array of cities based on their proximity to a given point. The distance is calculated with a straight line or travel distance between the places.
npm install use-sort-cities-by-distance
#or
yarn add use-sort-cities-by-distance
Import the 'useSortCitiesByDistance' hook from the package:
import { useSortCitiesByDistance } from 'use-sort-cities-by-distance'
Define your starting point, target destinations, and a .json list with coordinates of the possible targets:
import React, { useState } from 'react'
import { useSortCitiesByDistance } from 'use-sort-cities-by-distance'
import cities from './cities.json'
function YourComponent() {
const [config, setConfig] = useState({
list: cities, // List of possible cities
start: 'London', // Starting point
targets: ['London', 'Paris', 'New York', 'Barcelona'], // Array of target cities
unit: 'km', // Optional, default is 'miles', enter 'km' if you need kilometers
})
const { sorted } = useSortCitiesByDistance(config)
// Your component code
}
The list property should be an array of cities in the following .json format. A demo list can be found in the demo folder:
[
{ "city": "Los Angeles", "lat": 34.0522, "lng": -118.2437 },
{ "city": "London", "lat": 51.5074, "lng": -0.1278 },
{ "city": "Tokyo", "lat": 35.6895, "lng": 139.6917 }
]
Instead of a list, you can also use the hook with the Google Maps API. Just enter your key as the "key" property and omit the "list". The use of Google Maps allows the distance in travel distance.
const config = {
key: '******', // Google Maps API key
start: 'London',
targets: ['London', 'Paris', 'New York', 'Barcelona'],
travelDistance: true, // Optional, default is straight line
}
Possible errors are displayed in an error object, which you retain from the hook:
const { sorted, error } = useSortCitiesByDistance(config)
Contributions, issues, and feature requests are welcome!
This project is licensed under the MIT License