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
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}",
"./node_modules/@0xflair/**/*.{js,jsx,ts,tsx,vue}",
],
content: ["./src/**/*.{js,jsx,ts,tsx}"],
plugins: [
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>
);