Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bpetermann/use-sort-cities-by-distance
React hook to sort cities by distance to a point
https://github.com/bpetermann/use-sort-cities-by-distance
npm-package react reacthook
Last synced: about 2 months ago
JSON representation
React hook to sort cities by distance to a point
- Host: GitHub
- URL: https://github.com/bpetermann/use-sort-cities-by-distance
- Owner: bpetermann
- License: mit
- Created: 2023-08-02T13:04:16.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-10T12:05:12.000Z (4 months ago)
- Last Synced: 2024-11-11T05:57:37.078Z (2 months ago)
- Topics: npm-package, react, reacthook
- Language: TypeScript
- Homepage: https://bpetermann.github.io/use-sort-cities-by-distance/
- Size: 1.53 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# useSortCitiesByDistance
[](https://badge.fury.io/js/use-sort-cities-by-distance)
[![NPM version][npm-image]][npm-url]
[![Build][github-build]][github-build-url]
![npm-typescript]
[![License][github-license]][github-license-url]
`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.
## Getting started
### Installation
```bash
npm install use-sort-cities-by-distance
#or
yarn add use-sort-cities-by-distance
```
Import the 'useSortCitiesByDistance' hook from the package:
```jsx
import { useSortCitiesByDistance } from 'use-sort-cities-by-distance'
```
## Usage with JSON Data
Define your starting point, target destinations, and a .json list with coordinates of the possible targets:
```jsx
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:
```json
[
{ "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 }
]
```
## Usage with Google Maps
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.
```jsx
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:
```jsx
const { sorted, error } = useSortCitiesByDistance(config)
```
### Contributing
Contributions, issues, and feature requests are welcome!
### License
This project is licensed under the MIT License
[npm-url]: https://www.npmjs.com/package/use-sort-cities-by-distance
[npm-image]: https://img.shields.io/npm/v/use-sort-cities-by-distance
[github-license]: https://img.shields.io/github/license/bpetermann/use-sort-cities-by-distance
[github-license-url]: https://github.com/bpetermann/use-sort-cities-by-distance/blob/main/LICENSE
[github-build]: https://github.com/bpetermann/use-sort-cities-by-distance/actions/workflows/publish.yml/badge.svg
[github-build-url]: https://github.com/bpetermann/use-sort-cities-by-distance/actions/workflows/publish.yml
[npm-typescript]: https://img.shields.io/npm/types/use-sort-cities-by-distance