> For the complete documentation index, see [llms.txt](https://ourzora.gitbook.io/zoraos/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ourzora.gitbook.io/zoraos/dev/media-rendering/nft-hooks.md).

# NFT Hooks

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.

{% tabs %}
{% tab title="yarn" %}
`yarn add @zoralabs/nft-hooks`
{% endtab %}

{% tab title="npm" %}
`npm install @zoralabs/nft-hooks --save`
{% endtab %}
{% endtabs %}

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

```typescript
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](/zoraos/dev/media-rendering/nft-hooks/usenft.md)                | Fetches on-chain zNFT data                                      |
| *useNFT*                                                                  | Fetches on-chain NFT data for any ERC721 (coming soon)          |
| [useNFTMetadata](/zoraos/dev/media-rendering/nft-hooks/usenftmetadata.md) | Fetches NFT metadata from a URL                                 |
| [useNFTContent](/zoraos/dev/media-rendering/nft-hooks/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.

```typescript
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.