React-crypto-compare NPM

react-crypto-compare

A simple cryptocurrencies converter component based on https://min-api.cryptocompare.com. Min React version: 16.8.

react-crypto-compare

What this component does

it calls the cryptocompare.com "Single Symbol Price" API and shows the result
it allows to set the cryptocompare.com apikey once and reuse it
it comes unstyled, you can customize it using its global classes
it manages silently every network error (it logs errors into the console)

Install

npm install --save react-crypto-compare

How to use

First of all, you need a cryptocompare.com api key.

Then

import CryptoCompare from "react-crypto-compare";
// ...
<CryptoCompare from="EUR" to="BTC" amount={10} apikey="<YOUR_CRYPTOCOMPARE.COM_APIKEY>" />;

it renders

<div class="react-crypto-compare">
  <span class="react-crypto-compare-amount">0.001408</span>
  <span class="react-crypto-compare-currency">BTC</span>
</div>

You can set the api key just once to avoid passing it to the component

import CryptoCompare, { setApikey } from "react-crypto-compare";
setApikey("<YOUR_CRYPTOCOMPARE.COM_APIKEY>");
// ...
<CryptoCompare from="EUR" to="BTC" amount={10} />;

please note that the apikey prop, if passed, takes the precedence over the global api key set though setApikey.

CSS Classes

You can customize the look&feel of the component using its classes

.react-crypto-compare
.react-crypto-compare-error
.react-crypto-compare-loading

and its children ones

.react-crypto-compare-amount
.react-crypto-compare-currency

Working example

Run

cd example && npm run start

Possible improvements

managing the decimals for every cryptocurrency (at the moment fixed at eight thinking about Bitcoin)
passing the CSS classes from the parent component
adding an interval-based refresh to have always the most updated conversion
managing multiple currencies conversion in a single component
adding a render prop to manage the rendered markup from the outside