near-react-nft-gallery

A React component for displaying NEAR NFT galleries in a responsive grid layout.

Installation

npm install near-react-nft-gallery

Usage

import { NearReactNftGallery } from 'near-react-nft-gallery'

function App() { return ( ) }

With all props

import { NearReactNftGallery, NftToken } from 'near-react-nft-gallery'

function App() { const handleTokenClick = (token: NftToken) => { console.log('Clicked token:', token.token_id) }

return ( <NearReactNftGallery contractId="nft.example.near" className="my-gallery" style={{ background: '#f0f0f0' }} limit={20} columns={3} cardStyle={{ borderRadius: '8px' }} onTokenClick={handleTokenClick} /> ) }

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | contractId | string | ✅ | NEAR NFT contract ID | | className | string | — | CSS class for the wrapper | | style | React.CSSProperties | — | Inline style for the wrapper | | limit | number | — | Max number of tokens to fetch | | columns | number | — | Grid column count (default: 3) | | cardStyle | React.CSSProperties | — | Inline style for each card | | onTokenClick | (token: NftToken) => void | — | Callback when a token is clicked |

Types

interface NftToken { token_id: string owner_id: string metadata?: { title?: string description?: string media?: string copies?: number } }

License

MIT