Back to packageRELEASE DETAILS

0.27.16

npm

@0xflair/react-coingecko

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

Published27 Apr 2022

Direct dependencies50

Transitive dependenciesNot calculated

README

Current package documentation

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>
  );

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 60

Native requirements

50 direct targetsNot calculated transitive count

Package / target	Requirement	Relationship
@0xflair/react-common Environment { "local_name": "@0xflair/react-common", "alias": false, "peer_metadata": null }	`^0.27.16`	development
@0xflair/react-wallet Environment { "local_name": "@0xflair/react-wallet", "alias": false, "peer_metadata": null }	`^0.27.16`	development
@ethersproject/bignumber Environment { "local_name": "@ethersproject/bignumber", "alias": false, "peer_metadata": null }	`^5.6.0`	development
@headlessui/react Environment { "local_name": "@headlessui/react", "alias": false, "peer_metadata": null }	`^1.5.0`	development
@heroicons/react Environment { "local_name": "@heroicons/react", "alias": false, "peer_metadata": null }	`^1.0.6`	development
@rollup/plugin-commonjs Environment { "local_name": "@rollup/plugin-commonjs", "alias": false, "peer_metadata": null }	`^21.0.2`	development
@rollup/plugin-node-resolve Environment { "local_name": "@rollup/plugin-node-resolve", "alias": false, "peer_metadata": null }	`^13.1.3`	development
@rollup/plugin-typescript Environment { "local_name": "@rollup/plugin-typescript", "alias": false, "peer_metadata": null }	`^8.3.1`	development
@storybook/addon-actions Environment { "local_name": "@storybook/addon-actions", "alias": false, "peer_metadata": null }	`^6.4.19`	development
@storybook/addon-contexts Environment { "local_name": "@storybook/addon-contexts", "alias": false, "peer_metadata": null }	`^5.3.21`	development
@storybook/addon-controls Environment { "local_name": "@storybook/addon-controls", "alias": false, "peer_metadata": null }	`^6.4.19`	development
@storybook/addon-essentials Environment { "local_name": "@storybook/addon-essentials", "alias": false, "peer_metadata": null }	`^6.4.19`	development
@storybook/addon-interactions Environment { "local_name": "@storybook/addon-interactions", "alias": false, "peer_metadata": null }	`^6.4.19`	development
@storybook/addon-links Environment { "local_name": "@storybook/addon-links", "alias": false, "peer_metadata": null }	`^6.4.19`	development
@storybook/builder-webpack5 Environment { "local_name": "@storybook/builder-webpack5", "alias": false, "peer_metadata": null }	`^6.4.19`	development
@storybook/manager-webpack5 Environment { "local_name": "@storybook/manager-webpack5", "alias": false, "peer_metadata": null }	`^6.4.19`	development
@storybook/node-logger Environment { "local_name": "@storybook/node-logger", "alias": false, "peer_metadata": null }	`^6.4.19`	development
@storybook/preset-create-react-app Environment { "local_name": "@storybook/preset-create-react-app", "alias": false, "peer_metadata": null }	`4.1.0`	development
@storybook/react Environment { "local_name": "@storybook/react", "alias": false, "peer_metadata": null }	`^6.4.19`	development
@storybook/testing-library Environment { "local_name": "@storybook/testing-library", "alias": false, "peer_metadata": null }	`^0.0.9`	development
@testing-library/jest-dom Environment { "local_name": "@testing-library/jest-dom", "alias": false, "peer_metadata": null }	`^5.16.2`	development
@testing-library/react Environment { "local_name": "@testing-library/react", "alias": false, "peer_metadata": null }	`^12.1.4`	development
@testing-library/user-event Environment { "local_name": "@testing-library/user-event", "alias": false, "peer_metadata": null }	`^13.5.0`	development
@types/axios Environment { "local_name": "@types/axios", "alias": false, "peer_metadata": null }	`^0.14.0`	development
@types/jest Environment { "local_name": "@types/jest", "alias": false, "peer_metadata": null }	`^27.4.1`	development
@types/node Environment { "local_name": "@types/node", "alias": false, "peer_metadata": null }	`^16.11.26`	development
@types/react Environment { "local_name": "@types/react", "alias": false, "peer_metadata": null }	`^17.0.41`	development
@types/react-dom Environment { "local_name": "@types/react-dom", "alias": false, "peer_metadata": null }	`^17.0.14`	development
axios Environment { "local_name": "axios", "alias": false, "peer_metadata": null }	`^0.26.1`	development
browserify-zlib Environment { "local_name": "browserify-zlib", "alias": false, "peer_metadata": null }	`^0.2.0`	development
buffer Environment { "local_name": "buffer", "alias": false, "peer_metadata": null }	`^6.0.3`	development
crypto-browserify Environment { "local_name": "crypto-browserify", "alias": false, "peer_metadata": null }	`^3.12.0`	development
ethers Environment { "local_name": "ethers", "alias": false, "peer_metadata": null }	`^5.6.2`	development
https-browserify Environment { "local_name": "https-browserify", "alias": false, "peer_metadata": null }	`^1.0.0`	development
postcss Environment { "local_name": "postcss", "alias": false, "peer_metadata": null }	`^8.4.12`	development
react Environment { "local_name": "react", "alias": false, "peer_metadata": null }	`^17.0.2`	development
react-dom Environment { "local_name": "react-dom", "alias": false, "peer_metadata": null }	`^17.0.2`	development
react-scripts Environment { "local_name": "react-scripts", "alias": false, "peer_metadata": null }	`5.0.0`	development
rimraf Environment { "local_name": "rimraf", "alias": false, "peer_metadata": null }	`^3.0.2`	development
rollup Environment { "local_name": "rollup", "alias": false, "peer_metadata": null }	`^2.70.1`	development
rollup-plugin-dts Environment { "local_name": "rollup-plugin-dts", "alias": false, "peer_metadata": null }	`^4.2.0`	development
rollup-plugin-peer-deps-external Environment { "local_name": "rollup-plugin-peer-deps-external", "alias": false, "peer_metadata": null }	`^2.2.4`	development
rollup-plugin-postcss Environment { "local_name": "rollup-plugin-postcss", "alias": false, "peer_metadata": null }	`^4.0.2`	development
stream-browserify Environment { "local_name": "stream-browserify", "alias": false, "peer_metadata": null }	`^3.0.0`	development
stream-http Environment { "local_name": "stream-http", "alias": false, "peer_metadata": null }	`^3.2.0`	development
typescript Environment { "local_name": "typescript", "alias": false, "peer_metadata": null }	`^4.6.2`	development
wagmi Environment { "local_name": "wagmi", "alias": false, "peer_metadata": null }	`^0.3.0`	development
webpack Environment { "local_name": "webpack", "alias": false, "peer_metadata": null }	`^5.70.0`	development
@0xflair/react-common Environment { "local_name": "@0xflair/react-common", "alias": false, "peer_metadata": null }	`0.*`	peer
@0xflair/react-wallet Environment { "local_name": "@0xflair/react-wallet", "alias": false, "peer_metadata": null }	`0.*`	peer
@ethersproject/bignumber Environment { "local_name": "@ethersproject/bignumber", "alias": false, "peer_metadata": null }	`^5.6.0`	peer
@headlessui/react Environment { "local_name": "@headlessui/react", "alias": false, "peer_metadata": null }	`^1.5.0`	peer
@heroicons/react Environment { "local_name": "@heroicons/react", "alias": false, "peer_metadata": null }	`^1.0.6`	peer
@tailwindcss/aspect-ratio Environment { "local_name": "@tailwindcss/aspect-ratio", "alias": false, "peer_metadata": null }	`^0.4.0`	peer
@tailwindcss/forms Environment { "local_name": "@tailwindcss/forms", "alias": false, "peer_metadata": null }	`^0.5.0`	peer
axios Environment { "local_name": "axios", "alias": false, "peer_metadata": null }	`^0.26.1`	peer
ethers Environment { "local_name": "ethers", "alias": false, "peer_metadata": null }	`^5.6.2`	peer
react Environment { "local_name": "react", "alias": false, "peer_metadata": null }	`^17.0.2`	peer
react-dom Environment { "local_name": "react-dom", "alias": false, "peer_metadata": null }	`^17.0.2`	peer
wagmi Environment { "local_name": "wagmi", "alias": false, "peer_metadata": null }	`^0.3.0`	peer

Distribution files

1 collected

Distribution 1

Source distribution

Source file

Checksums from source

{
  "integrity": "sha512-n8Amuu4KUkccJEDGJKE9ZCiCWmb1NEzJ81BRXYZMVVm8W91+o6db7HBBV6dMKhdOna2U24oqow1vIhzFa3py5Q==",
  "shasum": "50b6978fa7245934be3ad488d39c9233b8577992",
  "tarball": "https://registry.npmjs.org/@0xflair/react-coingecko/-/react-coingecko-0.27.16.tgz",
  "fileCount": 8,
  "unpackedSize": 136164,
  "signatures": [
    {
      "keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA",
      "sig": "MEYCIQDtEzyo3SvAAAkdmIJpNLh89lDtojPFFhB6C8+481CqbwIhAIR2dqrXOVjW5yCWC8qOH0wDFzPIn9fWt131U6BJUM6X"
    }
  ],
  "npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaYrOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6MBAAmoWh/o7+26gQT+++Di8Kt3ZA8RFrUf2TOLaeurFm2DHDrDUa\r\nY0rlmT3ZhsN7CrxCgRkP7NOFm5rWBY435NW8evwOqQDeIWB55uNFMYA+Tjlr\r\nAxW6sctTKq/tcS/8dWI1+jLTym9I44JeBpnsQhahk/hkWTZtIYOVswQuKZY9\r\nD4pQJ2pJXruLBMQPQBg8LAH1ZAauScSyY+ep2YXqO3gwHEvtYmWQJcHdbaPE\r\n5FPO/7VPKXrbE8E6Aj3pNAK2BBKY1rWe7I++qBfratvhH+u4sai2uZC+axbL\r\n4OGpRNrGKdFFxtLL/S3DjYzIYHVNJbKHYoHnfWjjpPrJUBgD1YdQP7f9oOH0\r\nPzLK5hzZy2/1Sq5+OIYgJJi54E4onjAUZ1hrYiS4uUhHsTnFOqynGm2R5cFt\r\nGyojWR6VrhbF08fIdfeKCSD2U6xMrp5lcBSjEwwlt2sxwfL2Xbuw97DX36qw\r\nNnbvYTvLBY5ULtZ5VYhlNLIA92kLb5cX+rirjoLk/OddYECxB65xUtFTNiAg\r\n9+6MAe/J6SX1Dvi8dK+qrp8gLdab23fzjffKEPzpXN3BU1Xpge9vP2q3fA8y\r\n6YYzOp88WlqKnlcnqaOKpePZhT9Xkg2c/PBMe8fEB2Dm7DWkTuT7nEAQ4f3y\r\nbijdEcABk/0VnfInh+2iDeiDszO6AHbD1d4=\r\n=Grr8\r\n-----END PGP SIGNATURE-----\r\n"
}

Repository

PENDING

0xflair/typescript-sdk

Shared repository data · GitHub

License detected in repository: Not collected

Metadata history

Meaningful changes

Current collected state Current

Observed since 20 Oct, 23:18 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package_version:5e19bb516cd187d2c4e29e9ba4c12a32402a6333c08850eb653bb3a3f592097c

Other collected versions

0.123.227 Nov 0.123.112 Nov 0.123.08 Nov 0.122.228 Oct 0.122.128 Oct 0.122.028 Oct View all collected versions →