Introduction

Quickly fetch data for any NFT

---

NFT 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 Hooks

Hook	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.

---

Installing

View the source code for NFT Hooks: GH Repository

Yarn

yarn add @zoralabs/nft-hooks

NPM

npm install @zoralabs/nft-hooks --save

Importing

import { 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.

Supported Networks

import { Networks, NFTFetchConfiguration } from '@zoralabs/nft-hooks';
function NFTGallery() {  return (    <NFTFetchConfiguration networkId={Networks.MAINNET}>      <NFTList>    </NFTFetchConfiguration>  );}