nexgent-bubblemaps v1.0.0

Crypto Bubbles React

An interactive cryptocurrency bubble visualization component for React applications.

Features

• Interactive bubble animation using Pixi.js
• Real-time cryptocurrency price changes visualization
• Configurable time periods (1h, 24h, 7d, 30d, 1y)
• Responsive design
• Built-in coin icons
• Dark/light theme support

Installation

npm install crypto-bubbles-react
# or
yarn add crypto-bubbles-react

Usage

1. First, get your Coingecko API key from Coingecko

2. Use the component in your React application:

import { CryptoBubbles } from 'crypto-bubbles-react';

// Fetch your coin data
const fetchCoins = async () => {
  const response = await fetch(
    "https://api.coingecko.com/api/v3/coins/markets?" +
    "vs_currency=usd" +
    "&order=market_cap_desc" +
    "&per_page=100" +
    "&page=1" +
    "&sparkline=true" +
    "&price_change_percentage=1h,24h,7d,30d,1y" +
    "&locale=en" +
    `&x_cg_demo_api_key=${YOUR_API_KEY}`
  );
  return await response.json();
};

function App() {
  const [coins, setCoins] = useState([]);

  useEffect(() => {
    fetchCoins().then(setCoins);
  }, []);

  return (
    <div style={{ height: '100vh' }}>
      <CryptoBubbles coins={coins} />
    </div>
  );
}

Props

Types

interface CoingeckoCoinData {
  id: string;
  symbol: string;
  name: string;
  image: string;
  current_price: number;
  market_cap: number;
  // ... other Coingecko fields
}

Development

1. Clone the repository
2. Install dependencies: npm install
3. Start development server: npm run dev

License

MIT