Disclaimer: this was a tech exercise for a recruitment process.
A simple cryptocurrencies converter component based on https://min-api.cryptocompare.com. Min React version: 16.8.
- 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)
npm install --save react-crypto-compare
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
.
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
Run
cd example && npm run start
- 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
I've developed it because I'd some spare time (more less 4 hours) and I'd like to play with:
PR or issues are welcome 👋
Thanks goes to these wonderful people (emoji key):
Stefano Magni 💻 📖 |
This project follows the all-contributors specification. Contributions of any kind welcome!