Reusable components for live Bitcoin data
Perfect for navigation bars and compact spaces. Shows only price and 24h change.
new LiveMarketData({
container: '#minimal-demo',
view: 'minimal',
refreshInterval: 60000
});
Balanced display with price and change, ideal for sidebars and cards.
new LiveMarketData({
container: '#compact-demo',
view: 'compact',
showChange: true,
refreshInterval: 60000
});
Complete market statistics including price, market cap, volume, and dominance.
new LiveMarketData({
container: '#full-demo',
view: 'full',
showChange: true,
showMarketCap: true,
showVolume: true,
showDominance: true,
refreshInterval: 60000,
onUpdate: function(data) {
console.log('Price updated:', data.price);
},
onError: function(error) {
console.error('Error:', error);
}
});
Direct access to Bitcoin data through the centralized API handler.
Common use cases and integration patterns.
<nav>
<div class="logo">Your Site</div>
<div id="nav-price"></div>
</nav>
<script>
new LiveMarketData({
container: '#nav-price',
view: 'minimal',
refreshInterval: 30000
});
</script>
// Shared API handler for efficiency
const api = new BitcoinAPIHandler();
// Header price
new LiveMarketData({
container: '#header-price',
view: 'minimal',
apiHandler: api
});
// Dashboard stats
new LiveMarketData({
container: '#dashboard-stats',
view: 'full',
apiHandler: api
});
// Footer stats
new LiveMarketData({
container: '#footer-stats',
view: 'compact',
apiHandler: api
});