ourzora/nft-components

NFT Rendering Components

💅 @zoralabs/nft-components

Zora's NFT components allow you to easily create your own gallery or auction house with zNFT infrastructure.

This library provides the front-end display components on top of the @zoralabs/nft-hooks data-fetching library;

This library works alongside the Zora auction house (code) allows for DAOs and individuals to run their own decentralized auction house. Arbitrary NFTs across a wide variety of contract implementations are supported.

✨ view docs on storybook →

NFT Components

These components allow for drop-in rendering of NFTs. They work on the frontend and do not need any server-side components. These components are aware of both ongoing auctions and the perpetual markets for zNFTs, integrating latest bid information and other relevant marketplace information. They also handle most all of the same media types that the Zora marketplace natively handles (audio, video, image, HTML, and text). The components can be modified as needed and should be used as a prototype look and feel. Under the hood, they use the @zoralabs/nft-hooks library to retrieve data, if more customization is needed for the look and feel of the components the underlying data can be retrieved directly.

Main components:

• NFTPreview
  • Used to render a zNFT preview thumbnail
• NFTFullPage
  • Used to render a zNFT full page component
• NFTDataProvider
  • Used to compose a custom set of zNFT components
• MediaConfiguration
  • Configure the text, theme, and network settings for the zNFT.
• AuctionHouseList
  • Load a list of auctions for a given curator

Key Features:

• Server-side rendering
• Customizable theming / styling
• Customizable information ordering / display
• Updatable media rendering

Quickstart

1. Install package:

yarn add @zoralabs/nft-components

2. Render a NFT Thumbnail:

import { NFTPreview } from "@zoralabs/nft-components";

export const Page = () => <NFTPreview id="3002" />;

3. Render a NFT Full page:

import { NFTFullPage } from "@zoralabs/nft-components";

export const Page = () => <NFTFullPage id="3002" />;

4. Render a list of auctions for a curator:

import { NFTFullPage } from "@zoralabs/nft-components";

export const Page = ({curatorId}: {curatorId: string}) => (
    <AuctionHouseList
      onClick={(_, auction) => alert(`Clicked token ${auction.tokenId}`)}
      curatorIds={[curatorId]}
    />
);

4. Render a proposed auction:

import { NFTProposal } from "@zoralabs/nft-components";

export const Page = () => <NFTProposal id="3002" />;