NFT Hooks

zNFT Data Fetching Hooks. Retrieve pricing and NFT information to display on your own website.

This library consists of a data fetch class and associated React hooks to load NFT data is an easy, efficient manner. The API both batches and caches requests, meaning you can use the hooks across a page without needing to worry about significant performance penalties.

yarn

yarn add @zoralabs/nft-hooks

npm

npm install @zoralabs/nft-hooks --save

Then you can import and use the hooks in your react application:

import {useZNFT, useNFTMetadata} from "@zoralabs/nft-hooks";

function MyNFT() {
  const {data} = useZNFT("20");
  const {metadata} = useNFTMetadata(data && data.metadataURI);

  return (
    <div>
      <h3>{metadata.title}</h3>
      <p>{metadata.description}</p>
      <p>Owned by: {data.owner.id}</p>
    </div>
  );
}

All hooks:

Hook	Usage
useZNFT	Fetches on-chain zNFT data
useNFT	Fetches on-chain NFT data for any ERC721 (coming soon)
useNFTMetadata	Fetches NFT metadata from a URL
useNFTContent	Fetches text content from server for rendering from content URL

Configuration:

To set the network configuration, wrap the hooks used with the NFTFetchConfiguration component.

import {Networks, NFTFetchConfiguration} from '@zoralabs/nft-hooks';

function NFTGallery() {
  return (
    <NFTFetchConfiguration network={Networks.MAINNET}>
      <NFTList>
    </NFTFetchConfiguration>
  );
}

Development:

1. git clone https://github.com/ourzora/nft-hooks

2. cd nft-hooks

3. npm i -g yarn if you don't have yarn installed

4. yarn

5. yarn run test test your code

Pull requests and tickets are accepted for issues and improvements to this library.