First, install the component:
yarn add react-local-currency
or
npm i react-local-currency --save
import * as React from 'react'
import LocalCurrency from 'react-local-currency'
const ReactLocalCurrency = () => (
<LocalCurrency
amount={7}
base='USD'
IPDATA_API_KEY={process.env.REACT_APP_IPDATA_API_KEY} // Get the api key from http://ipdata.co
OXR_API_ID={process.env.REACT_APP_OXR_API_ID} // Get the api id from https://openexchangerates.org
render={({ data, loading, error }) => {
if (error) return `Error! ${error.message}`
if (loading) return 'Loading ...'
if (!data) return null
return (
<div>
<h3>
My service price: <strong>7 USD.</strong>
</h3>
<h3>
My currency based on my IP: <strong>{`${data.currency}`}</strong>
</h3>
<h3>
My local price is: <strong>{`${data.amount} ${data.currency}`}</strong>
</h3>
</div>
)
}}
/>
)
export default ReactLocalCurrency
To see a full example, look at the demo and the source 👩🏻💻 👨🏻💻
Thanks to Nadia Ilustraciones for donating the logo!
MIT license. Copyright © 2018.