react-ip-details

Get user location/ip-details/geo position/currency convert based on api or navigation using simple hook on react

Installation

npm install react-ip-details yarn add react-ip-details

Usage

Here's an example of basic usage:

import React from "react";
import useReactIpLocation from "react-ip-details";

function TimePickerTest() {
  const {
    currency,
    exchangeRate,
    ipResponse,
    exchangeRateResponse,
    errorMessage,
    geoLocationPosition,
    geoLocationErrorMessage,
    currencyString,
  } = useReactIpLocation({ numberToConvert: 100 });
  console.log(`Full ip response ${ipResponse}`);
  console.log(`Full ip exchange-rate response ${exchangeRateResponse}`);
  return (
    <div>
      {`Local currency string format is ${currencyString}`}
      {`Local currency is ${currency}`}
      {`Geo location details: ${geoLocationPosition}`}
      {`Exchange rate is ${exchangeRate}`}
      {`Error Message: ${errorMessage}`}
      {`Geo Error Message: ${geoLocationErrorMessage}`}
    </div>
  );
}

Import Component

import TimePicker from 'react-ip-details'

Props

| PropName | Type | default | description | | --------------------- | ------- | ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | | defaultCurrency | string | USD | Default currency (your webpage currency) if u want to make an exchange to local currency | | | | | Check currency supported on api used or change url to support it=> https://www.exchangerate-api.com/docs/supported-currencies | | detailsByIpUrl | string | https://geolocation-db.com/json/ | You can change url to , make sure endpoint return country_code inside response data | | exchangeRateUrl | string | https://api.exchangerate-api.com/v4/latest/ | You can change url to , make sure ndpoint accept /${currency} addition and return rates in response data | | shouldGetIpDetails | boolean | true | Will not use api details request if false. | | shouldGetExchangeRate | boolean | true | Will not use exchange rate request if false,will keep USD currency only | | shouldGetPosition | boolean | false | Turn it to true if u need geolocation info | | numberToConvert | number | 0 | If you want to convert number to current currency and format (ex:200 => $100.00(in US) / ALL 10,742(in Albania)) | | codeCountryToCurrency | object | json object (see countryCodeToCurrency.js) | You can pass as prop if you want to edit specific country currency for ex : you want to use Eur in Al(Albania) | | codeCountryToLocal | object | json object (see countryCodesToLocal.js) | You can pass as prop if you want to edit based on your desire (similar to countryToCurrency) |

Return Props

| PropName | Type | example | description | | ----------------------- | ------ | -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | | currencyString | string | $100.00 | It will return local currency string formated based on currency and exchange rate and numberToConvert | | currency | string | USD | It will return local currency based on api at (detailsByIpUrl prop) | | exchangeRate | string | 1.23 | Exchange rate of default currency to local currency based on ip api and currency exchange api | | geoLocationPosition | object | cords: {latitude: 41.342,longitude: 19.811} | Get location position based on navigation built in without using api (if you need only this use onlyPosition:true) | | ipResponse | object | response of api at (endpoint:detailsByIpUrl) | | | exchangeRateResponse | object | response of api at (endpoint:exchangeRateUrl | | | errorMessage | string | Make sure location is allowed by browser | If api fails or anything get wrong it will display messages (messages are static not based on api) replace based on your need | | geoLocationErrorMessage | string | No location found | If navigation location fails to find coords it will display error message |