Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/noriste/react-crypto-compare

A simple cryptocurrencies converter component based on https://min-api.cryptocompare.com
https://github.com/noriste/react-crypto-compare

cryptocurrency cypress react reacthooks

Last synced: 2 months ago
JSON representation

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

Host: GitHub
URL: https://github.com/noriste/react-crypto-compare
Owner: NoriSte
License: other
Created: 2019-05-22T05:01:27.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2023-01-03T23:31:08.000Z (about 2 years ago)
Last Synced: 2024-10-17T23:11:05.210Z (3 months ago)
Topics: cryptocurrency, cypress, react, reacthooks
Language: JavaScript
Homepage: https://www.npmjs.com/package/react-crypto-compare
Size: 6.54 MB
Stars: 4
Watchers: 1
Forks: 3
Open Issues: 30
Metadata Files:
- Readme: README.md
- License: LICENSE.md

Awesome Lists containing this project

README

        # react-crypto-compare

*Disclaimer: this was a tech exercise for a recruitment process.*

---

A simple cryptocurrencies converter component based on

[https://min-api.cryptocompare.com](https://min-api.cryptocompare.com). Min React version: 16.8.

[![Cypress Dashboard](https://img.shields.io/static/v1?label=Cypress&message=Dashboard&color=00BF88)](https://dashboard.cypress.io/#/projects/zc8g3j/runs)




[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FNoriSte%2Freact-crypto-compare.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2FNoriSte%2Freact-crypto-compare?ref=badge_shield)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

[![TypeScript](https://badges.frapsoft.com/typescript/love/typescript.svg?v=101)](https://github.com/ellerbrock/typescript-badges/)

- [react-crypto-compare](#react-crypto-compare)

  - [What this component does](#what-this-component-does)

  - [Install](#install)

  - [How to use](#how-to-use)

  - [CSS Classes](#css-classes)

  - [Working example](#working-example)

  - [Possible improvements](#possible-improvements)

  - [Why](#why)

  - [Contributing](#contributing)

  - [Contributors](#contributors)

## What this component does

- it calls the [cryptocompare.com "Single Symbol Price"

  API](https://min-api.cryptocompare.com/documentation?key=Price&cat=SingleSymbolPriceEndpoint) and

  shows the result

- it allows to set the [cryptocompare.com apikey](https://www.cryptocompare.com/cryptopian/api-keys) once and reuse it

- it comes unstyled, you can customize it using its [global classes](#css-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](https://www.cryptocompare.com/cryptopian/api-keys).

Then

```jsx

import CryptoCompare from "react-crypto-compare";

// ...

;

```

it renders

```html



  0.001408

  BTC



```

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

```jsx

import CryptoCompare, { setApikey } from "react-crypto-compare";

setApikey("");

// ...

;

```

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

```bash

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](https://www.npmjs.com/package/create-react-library)

- [cypress-react-unit-test](https://github.com/bahmutov/cypress-react-unit-test)

## Contributing

PR or issues are welcome 👋

## Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):


_{Stefano Magni}
💻 📖

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!