# @zoralabs/nft-hooks

> Generic react hooks for fetching zora auctions, nfts, and data on arbitary 721s. Powers nft-components.

Latest version **1.2.1** (published 2023-01-10) · GPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install @zoralabs/nft-hooks
pnpm add @zoralabs/nft-hooks
yarn add @zoralabs/nft-hooks
bun add @zoralabs/nft-hooks
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2023-01-10 |
| First published | 2021-05-07 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 12 |
| Unpacked size | 934.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 140 |
| Author | Zora |
| Maintainers | nkiamilev, bbah, 0xtranqui, extrawaterjoe, taayyohh, blokboy, margalit, jakerunzer, jemgold, kulk, zerostyle, kolber, steev27, ismallcombe, mrdain, tbtstl, daihovey, j-s, nguyensomniac, olegakbarov, bjfresh, jgeary, iainnash, zacgoods, mattlenz |

## Links

- npm: https://www.npmjs.com/package/@zoralabs/nft-hooks
- Repository: https://github.com/ourzora/nft-hooks
- Homepage: https://github.com/ourzora/nft-hooks#README
- Issues: https://github.com/ourzora/nft-hooks/issues
- npm.io page: https://npm.io/package/@zoralabs/nft-hooks

## Dependencies (12)

- [swr](https://npm.io/package/swr.md) ^1.3.0
- [tslib](https://npm.io/package/tslib.md) ^2.4.0
- [big.js](https://npm.io/package/big.js.md) ^6.1.0
- [deepmerge](https://npm.io/package/deepmerge.md) ^4.2.2
- [dataloader](https://npm.io/package/dataloader.md) ^2.0.0
- [cross-fetch](https://npm.io/package/cross-fetch.md) ^3.1.4
- [@zoralabs/zdk](https://npm.io/package/@zoralabs/zdk.md) 2.1.6
- [graphql-request](https://npm.io/package/graphql-request.md) ^4.2.0
- [@types/deepmerge](https://npm.io/package/@types/deepmerge.md) ^2.2.0
- [@ethersproject/bytes](https://npm.io/package/@ethersproject/bytes.md) ^5.6.1
- [node-abort-controller](https://npm.io/package/node-abort-controller.md) ^2.0.0
- [@ethersproject/address](https://npm.io/package/@ethersproject/address.md) ^5.6.0

## Recent versions

- 1.2.1 (latest) — 2023-01-10
- 1.0.31 (strategies-pre-release) — 2022-05-24
- 1.2.0 — 2023-01-07
- 1.1.10 — 2022-09-26
- 1.1.9 — 2022-08-25
- 1.1.8 — 2022-07-27
- 1.1.7 — 2022-06-07
- 1.1.6 — 2022-06-06
- 1.1.5 — 2022-06-06
- 1.1.4 — 2022-06-03
- 1.1.3 — 2022-06-03
- 1.1.2 — 2022-06-02
- 1.1.1 — 2022-06-01
- 1.1.0 — 2022-05-31
- 1.0.32 — 2022-05-25
- … 75 more at https://npm.io/package/@zoralabs/nft-hooks/versions

## 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](https://github.com/ourzora/nft-components) a complimentary library to this one to render NFT data on a webpage.


Install:
```bash
yarn add @zoralabs/nft-hooks
```

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

```ts
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](docs/useNFT.md) | Fetches on-chain NFT data using a configured backend strategy
| [useNFTQuery](docs/useNFTQuery.md) | Queries for NFTs using a configured backend strategy
| [useNFTMetadata](docs/useNFTMetadata.md) | Fetches off-chain metadata (not required for most indexers)
| [useNFTContent](docs/useNFTContent.md) | Fetches off-chain content (useful for some text content, but less often used)

### Configuration:

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

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

const zdkStrategy = Strategies.ZDKFetchStrategy();

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

### Data sources:

Provided strategies are:
1. ZDKFetchStrategy from the zora indexer (recommended)
2. ZoraV2Indexer strategy from the legacy zora indexer (deprecated)
3. ZoraGraphStrategy strategy from the zora subgraph (not recommended)
4. EtherActorStrategy using ether.actor as a nft backend (not recommended)
5. OpenseaStrategy using opensea's api as a nft backend (not recommended)

Links direct to zora.co interfaces, but can be overridden to directly use the [zdk](https://github.com/ourzora/zdk) instead.

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

---
_Source: https://npm.io/package/@zoralabs/nft-hooks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._