Introduction
#
Quickly fetch data for any NFTNFT Hooks consists of a data fetch class and associated hooks to load NFT data. The API both batches and caches requests, meaning you can use the hooks across a page without needing to worry about significant performance penalties.
#
Primary HooksHook | Usage |
---|---|
useNFT | Fetches all data for a ERC-721 NFT in a React App |
ZDKFetchStrategy | Fetches all data for an NFT for server-side or non-React uses |
Most NFT data can be grabbed from the useNFT
hook.
However, useNFTMetadata and useNFTContent can also be used for grabbing specific data.
#
InstallingView the source code for NFT Hooks: GH Repository
- Yarn
- NPM
yarn add @zoralabs/nft-hooks
npm install @zoralabs/nft-hooks --save
#
Importingimport { useNFT, useNFTMetadata } from '@zoralabs/nft-hooks'
function MyNFT() { const { data } = useNFT('0xabEFBc9fD2F806065b4f3C237d4b59D9A97Bcac7', '20')
return ( <div> <h3>{data.metadata.name}</h3> <p>{data.metadata.description}</p> <p>Owned by: {data.nft.owner.address}</p> </div> )}
#
Networks (Optional)NFT Hooks defaults to Ethereum Mainnet.
However, to set the configuration to a specific network, wrap the hooks used with the NFTFetchConfiguration
component.
import { Networks, NFTFetchConfiguration } from '@zoralabs/nft-hooks';
function NFTGallery() { return ( <NFTFetchConfiguration networkId={Networks.MAINNET}> <NFTList> </NFTFetchConfiguration> );}