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
  • Install
  • How to use
  • CSS Classes
  • Working example
  • Possible improvements
  • Why
  • Contributing
  • Contributors

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

Why

I've developed it because I'd some spare time (more less 4 hours) and I'd like to play with:

• create-react-library
• cypress-react-unit-test

Contributing

PR or issues are welcome 👋

Contributors

Thanks goes to these wonderful people (emoji key):

Stefano Magni 💻 📖

This project follows the all-contributors specification. Contributions of any kind welcome!