@0xflair/react-coingecko

Flair SDK: react-coingecko

React hooks to get prices of cryptocurrency coins and tokens from CoinGecko.

Getting Started

Installation

• Install the package:

  npm install @0xflair/react-coingecko
  

• Install peer dependencies:

  npm install axios
  
  # if visual components needed:
  npm install tailwindcss @headlessui/react @heroicons/react @tailwindcss/aspect-ratio
  

• Configure tailwind.config.js (Tailwind v3) to scan SDK for classes (if visual components needed):

  module.exports = {
    purge: [
      "./public/**/*.html",
      "./src/**/*.{js,jsx,ts,tsx,vue}",
  
      // This line tells Tailwind to look into SDK files
      "./node_modules/@0xflair/**/*.{js,jsx,ts,tsx,vue}",
    ],
    content: ["./src/**/*.{js,jsx,ts,tsx}"],
    plugins: [
      // These plugins are used in this package
      require("@tailwindcss/forms"),
      require("@tailwindcss/aspect-ratio"),
    ],
  };
  

• Configure the React provider:

  const cryptoPricesConfig = {
    coinGecko: {
      apiKey: "xxxx",
      symbols: ["ethereum", "matic-network"],
    },
  };
  
  const App = () => {
    return (
      <div className="app">
        <CoinGeckoProvider config={cryptoPricesConfig}>
          <HookExample />
        </CoinGeckoProvider>
      </div>
    );
  };
  

Usage

Simple Price

import { CryptoPrice, CryptoUnits } from "@0xflair/react-coingecko";

function App() {
  return (
    <>
      <CryptoPrice value='0.06' unit={CryptoUnits.ETHER} />
    </>
  );

Price Hook

import { useCryptoPrice } from "@0xflair/react-coingecko";

function App() {
  const [{data, error, loading}, fetchPrice] = useCryptoPrice({
    symbol: 'ethereum'
  });

  return (
    <ul>
        <li>Price of Ether: {data.usd} USD</li>
        <li>Loading: {loading ? 'Yes...' : 'Idle'}</li>
        <li>Error: {error}</li>
    </ul>
  );

Changelog

0.123.2 (2022-11-27)

Bug Fixes

• always enumerate until 20k token ids (598fdf9)