ERC-5489 NFT Hyperlink Extension SDK

Welcome to the documentation for the ERC-5489 NFT Hyperlink Extension SDK. This SDK provides a convenient way for developers to interact with hNFTs (NFTs with hyperlinks) on the Ethereum (or any EVM compatible) blockchain. With this SDK, developers can easily utilize and manage hyperlinks attached to NFTs.

See live demo here.

Getting Started

Installation

To install the ERC-5489 NFT Hyperlink Extension SDK, follow these steps:

• Open your terminal or command prompt.
• Navigate to your project directory.
• Run the following command to install the SDK via npm:

npm install hyperlink-nft-badge

Alternatively, you can use yarn:

yarn add hyperlink-nft-badge

Once the installation is complete, you can import the SDK into your project and start using its functionalities.

Usage

The ERC-5489 NFT Hyperlink Extension SDK provides several methods for interacting with hNFTs. Here's an overview of the available functionalities.

Use as React Component

import { HnftBadge } from 'hyperlink-nft-badge';

<div className='badge-container'>
  <HnftBadge hnftImageUrl={imageUrl} hnftContractAddress={hnftContractAddr} hnftTokenId={hnftTokenId}></HnftBadge>
</div>

Use as Web Components

import 'hyperlink-nft-badge'; in your top level component. Then use <hyperlink-nft-badge> like any other HTML element.

<div class="badge-container">
  <hnft-badge hnftImageUrl="https://foo.images.url/123" hnftContractAddress="0x123abc" hnftTokenId="1"></hnft-badge>
</div>

API

The HnftBadge component accepts the following properties:

| Property | Type | Description | | -------- | ---- | ----------- | | hnftImageUrl | string | The url of the image of the NFT | | hnftContractAddress | string | The contract address of NFT | | hnftTokenId | number | The tokenId of NFT | | darkMode | boolean | Use dark UI styles |