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/ }'"

these parameters are set for all widgets on the 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

default: 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/dist'

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>

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