View NFTs with OnchainKit
NFTCard
component provides an easy way to view any NFT. Just enter the NFT contract address and token Id and include the child components you want to render.
NFTCard
component, ensure you’ve completed the Getting Started steps.
To use the NFTCard
component, you’ll need to provide an API Key in OnchainKitProvider
. You can get one following our Getting Started steps.
create onchain
to scaffold your project.
NFTCard
to an existing project, simply install OnchainKit.
<OnchainKitProvider />
around your app, following the steps in Getting Started.
NFTCardDefault
component is a simplified version of the NFTCard
component, designed to streamline the integration process for developers. Instead of manually defining each subcomponent, developers can use this shorthand version which renders our suggested implementation of the component and includes NFTTitle
, NFTMedia
, NFTOwner
, NFTLastSoldPrice
and NFTNetwork
.
Add the NFTCard
Add the NFTCard components
<NFTMedia />
aspect ratiosquare={false}
on the <NFTMedia />
component.
className
.
NFTCard
implementation uses Coinbase Developer Platform to provide the data and requires an API key. If you would like to use your own data, you can use the useNFTData
prop to pass in a hook which fetches the NFT data from a source of your choice. As long as this hook returns an object with the same shape as the NFTData
type, the NFTCard will render.
LifecycleStatus
and the onStatus
prop to listen to transaction states.
NFTCard has 4 lifecycle states:
init
- The component is initializederror
- The component has encountered an errormediaLoading
- The media is loadingsuccess
- The media has been loadedNFTCard
component can be customized with the following components:
<NFTMedia square={boolean}/>
- The media for the NFT, this includes support for images, videos and audio NFTs.<NFTTitle />
- The title of the NFT.<NFTOwner />
- Displays the Owners Avatar, name or address and badge (if applicable).<NFTLastSoldPrice />
- The last sold price of the NFT in native currency and USD.<NFTNetwork />
- The network the NFT is on, currently only BASE NFTs are supported.