@tokenicon/react
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

TokenIcon logo

TokenIcon

npm package bundle size

Official TokenIcon component for React

Installation

Using yarn

yarn add @tokenicon/react

or using npm

npm install -S @tokenicon/react

Usage

Use TokenIcon to render token image. TokenInfoProvider is optional and used to fill alt attribute with full token name.

If you want to use useTokenInfo then TokenInfoProvider initialized with TokenInfoCache instance is required.

Example

import { TokenIcon, TokenInfoCache, TokenInfoProvider } from '@tokenicon/react';

const tokenInfoCache = new TokenInfoCache();

function App() {
  return (
    <TokenInfoProvider cache={tokenInfoCache}>
      <TokenIcon chain="ethereum" address="0xdAC17F958D2ee523a2206206994597C13D831ec7" size={64} />
    </TokenInfoProvider>
  );
}

API

TokenIcon

Renders token image. It has all img props and token related props listed bellow.

Properties

name description type default
address Token address string -
chain Token chain (required) string -
placeholder Should placeholder be shown while image is loading or unavailable?
Pass string as url-value for custom placeholder.
boolean | string true
round Should icon be rounded? boolean true
size Icon size number -

TokenInfoCache

Manages and caches all the token info queries.

Methods

name description
fetch(chain, address) Fetch token info or get it from cache (if available)
get(chain, address) Get token info cache data
subscribe(chain, address, callback) Subscribe to changes of token info cache data

TokenInfoProvider

Provides access to TokenInfoCache for underlying react components.

Properties

name description type default
cache Instance of TokenInfoCache TokenInfoCache -

useTokenInfo(chain, address): TokenInfoCacheData

Hook to fetch or get token info from cache

Package Sidebar

Install

npm i @tokenicon/react

Weekly Downloads

2

Version

1.1.0

License

MIT

Unpacked Size

15.5 kB

Total Files

14

Last publish

Collaborators

  • vshab
  • mxck