NFT Data Fetching Hooks with Zora Contract Data 使用教程

最新推荐文章于 2024-09-16 08:06:57 发布

申芹琴

最新推荐文章于 2024-09-16 08:06:57 发布

阅读量628

点赞数 19

本文链接：https://blog.csdn.net/gitblog_00673/article/details/142274127

版权

NFT Data Fetching Hooks with Zora Contract Data 使用教程

nft-hooks NFT Data Fetching Hooks with Zora contract data 项目地址: https://gitcode.com/gh_mirrors/nf/nft-hooks

1. 项目介绍

@zoralabs/nft-hooks 是一个用于加载 Zora NFT 数据的简单 React Hooks 库。它包含了链上数据、NFT 元数据以及用于获取 NFT 内容的工具。该库的设计旨在以简单、高效的方式加载 NFT 数据，API 支持批量请求和缓存，因此可以在页面中跨组件使用 Hooks 而无需担心显著的性能问题。

2. 项目快速启动

安装

首先，使用 Yarn 安装 @zoralabs/nft-hooks：

yarn add @zoralabs/nft-hooks

使用

在 React 应用中导入并使用 Hooks：

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>
  );
}

配置

为了设置网络配置，可以使用 NFTFetchConfiguration 组件来包装使用的 Hooks：

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

const zdkStrategy = Strategies.ZDKFetchStrategy();

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