@coinpaprika/widget-currency

Coinpaprika Currency Widget

How to use

Parameters:

In div element: data-/parameter/="/value/"

example:

<div class="coinpaprika-currency-widget" 
     data-primary-currency="USD" 
     data-currency="btc-bitcoin" 
     data-modules='["chart", "market_details"]'  
     data-update-active="false" 
     data-update-timeout="30s"></div>

In script element: "data-cp-currency-widget='{ "/parameter/": /value/ }'"

this parameters is set to all widgets on page

example:

<div class="coinpaprika-currency-widget"></div>
<script src="./src/widget.js"
        data-cp-currency-widget='{
            "language": "pl",
            "primary-currency": "ETH",
            "origin-src": "."
        }'>
</script>

API:

currency - Currency ID that you can get from API ex. 'btc-bitcoin'

default: 'btc-bitcoin'

primary-currency - the currency to which the values ​​will be converted possible options 'USD', 'PLN', 'BTC' and 'ETH'

default: 'USD'

modules - 'market_details' and 'chart' (you can combine all modules)

Chart module:

Market details module:

All modules:

default: ['market_details', 'chart']

range - initial chart range '24h', '7d', '30d', '1q', '1y', 'ytd', 'all'

default: '7d'

update-active - bool value is live data updates active

deafult: false

update-timeout - Update interval '30s', '1m', '5m', '10m', '30m'

default: '30s'

language - text translation from files in dist/lang/

default: 'en'

origin-src - custom link to /dist directory

default: 'https://unpkg.com/@coinpaprika/widget-currency'

style-src - custom link to css file, if you don't want to fetch styles from js set as false

default: null

img-src - custom link to img folder

default: null

lang-src - custom link to lang folder

default: null

Night Mode:

Enable styling for dark backgrounds by adding cp-widget__night-mode class to widget element

<div class="coinpaprika-currency-widget cp-widget__night-mode"></div>

Copy paste this code in your HTML, replacing data parameters

<div class="coinpaprika-currency-widget" 
     data-primary-currency="USD" 
     data-currency="btc-bitcoin"
     data-update-active="false" 
     data-update-timeout="30s"></div>
<script src="https://unpkg.com/@coinpaprika/widget-currency/dist/widget.min.js"></script>

Via npm

npm i @coinpaprika/widget-currency --save

Then add this to your HTML, replacing data parameters

<div class="coinpaprika-currency-widget"></div>
<script src="../node_modules/@coinpaprika/widget-currency/dist/widget.min.js" 
        data-cp-currency-widget='{
            "origin-src": "../node_modules/@coinpaprika/widget-currency"
        }'></script>

Via bower

bower install coinpaprika-widget-currency --save

Then add this to your HTML, replacing data parameters

<div class="coinpaprika-currency-widget"></div>
<script src="../bower_components/coinpaprika-widget-currency/dist/widget.min.js" 
        data-cp-currency-widget='{
            "origin-src": "../bower_components/coinpaprika-widget-currency"
        }'></script>

Using multiple widgets in same page

<div class="coinpaprika-currency-widget"></div>
<div class="coinpaprika-currency-widget" 
     data-currency="xrp-xrp"
     data-update-active="true"></div>
<script src="https://unpkg.com/@coinpaprika/widget-currency/dist/widget.min.js"></script>

Live Demo

https://jsfiddle.net/xrz46ajs