# temp-nft-hooks

> Generic Rendering Component for zNFTs

Latest version **0.1.0** (published 2021-09-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install temp-nft-hooks
pnpm add temp-nft-hooks
yarn add temp-nft-hooks
bun add temp-nft-hooks
```

## Health

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

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

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2021-09-01 |
| First published | 2021-09-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 11 |
| Unpacked size | 701 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 140 |
| Author | Zora |
| Maintainers | tbtstl |

## Links

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

## Dependencies (11)

- [swr](https://npm.io/package/swr.md) ^0.5.6
- [react](https://npm.io/package/react.md) ^17.0.2
- [tslib](https://npm.io/package/tslib.md) ^2.2.0
- [big.js](https://npm.io/package/big.js.md) ^6.1.0
- [graphql](https://npm.io/package/graphql.md) ^15.5.0
- [dataloader](https://npm.io/package/dataloader.md) ^2.0.0
- [cross-fetch](https://npm.io/package/cross-fetch.md) ^3.1.4
- [graphql-request](https://npm.io/package/graphql-request.md) ^3.4.0
- [react-test-renderer](https://npm.io/package/react-test-renderer.md) ^17.0.2
- [node-abort-controller](https://npm.io/package/node-abort-controller.md) ^2.0.0
- [@ethersproject/address](https://npm.io/package/@ethersproject/address.md) ^5.4.0

## Recent versions

- 0.1.0 (latest) — 2021-09-01

## 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 for either zora or non-zora NFTs |
| [useZNFT](docs/useZNFT.md) | Fetches on-chain zora zNFT data (most likely want to use useNFT) |
| [useAuctions](docs/useAuctions.md) | Fetches list of auctions given one or more curators from the Zora auction house |
| [useNFTMetadata](docs/useNFTMetadata.md) | Fetches NFT metadata from a URL |
| [useNFTContent](docs/useNFTContent.md) | Fetches text content from server for rendering from content URL |

### Configuration:

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

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

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

### Data sources:

Currently data is fetched from:
1. TheGraph for auction information, zNFT information, and currency information
2. Direct metadata URIs for zNFT metadata
3. Opensea for non-zora tracked NFTs

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/temp-nft-hooks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._