temp-nft-hooks
v0.1.0
Published
Generic Rendering Component for zNFTs
Downloads
3
Readme
@zoralabs/nft-hooks
Simple React hooks to load Zora NFT data. Includes on-chain data, NFT metadata, and tools for fetching NFT content if needed.
Put together, these power implementations of the zNFT protocol on any 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.
👯 See also: @zoralabs/nft-components a complimentary library to this one to render NFT data on a webpage.
Install:
yarn add @zoralabs/nft-hooks
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 | | -- | -- | | useNFT | Fetches on-chain NFT data for either zora or non-zora NFTs | | useZNFT | Fetches on-chain zora zNFT data (most likely want to use useNFT) | | useAuctions | Fetches list of auctions given one or more curators from the Zora auction house | | 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>
);
}
Data sources:
Currently data is fetched from:
- TheGraph for auction information, zNFT information, and currency information
- Direct metadata URIs for zNFT metadata
- Opensea for non-zora tracked NFTs
Links direct to zora.co interfaces, but can be overridden to directly use the zdk instead.
Development:
git clone https://github.com/ourzora/nft-hooks
cd nft-hooks
npm i -g yarn
if you don't have yarn installedyarn
yarn run test
test your code
Pull requests and tickets are accepted for issues and improvements to this library.