@coinpaprika/widget-currency

    1.1.9 • Public • Published

    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

    Install

    npm i @coinpaprika/widget-currency

    DownloadsWeekly Downloads

    1,470

    Version

    1.1.9

    License

    MIT

    Unpacked Size

    485 kB

    Total Files

    18

    Last publish

    Collaborators

    • it_coinpaprika
    • j.marcin
    • jlorc