currexer v1.1.0

currexer

A lightweight currency rates exchanger Check live demo!

Install

npm install --save currexer

Usage

All you need is to pass an object of currencies with the needed props, and a callback function to update your state on exchange.

import React, { Component } from 'react'

import Currexer from 'currexer'

function Example {
  const initData = [
    {
      balance: 631,
      code: 'USD',
      title: 'US Dollar',
      symbole: '$',
      avatar: 'https://www.merchantstronghold.com/currency/wp-content/uploads/2017/05/usd-1.png'
    },
    {
      balance: 2671,
      code: 'GBP',
      title: 'British Pound',
      symbole: '£',
      avatar: 'https://upload.wikimedia.org/wikipedia/en/thumb/a/ae/Flag_of_the_United_Kingdom.svg/800px-Flag_of_the_United_Kingdom.svg.png'
    },
    {
      balance: 120,
      code: 'EUR',
      title: 'Euro',
      symbole: '€',
      avatar: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTy4DgxR-K_UnfC9u5m6DVo8ZnutukKbpETkw&usqp=CAU'
    },
    {
      balance: 2220,
      code: 'PLN',
      title: 'Polish Zloty',
      symbole: 'zł',
      avatar: 'https://cdn.britannica.com/52/3552-004-D849A1D3/Flag-Poland.jpg'
    },
  ]

  const [currencies, setCurrencies] = useState(initData)

  const handleChange = (updatedBalances) => {
    const updatedCurrencies = [ ...currencies ]
    Object.entries(updatedBalances).forEach(([code, balance]) => { 
      updatedCurrencies[code] && (updatedCurrencies[code].balance = balance)
    })
    setCurrencies(updatedCurrencies)
  }

  return (
    <CurrExer
      currencies={currencies}
      onExchange={handleChange}
    />
  )
}

License

(MIT) © AbdallahZac