All Projects → bkrem → react-nft-gallery

bkrem / react-nft-gallery

Licence: MIT license
🖼️ React component to display your NFTs as a gallery

Programming Languages

typescript
32286 projects
CSS
56736 projects
javascript
184084 projects - #8 most used programming language
shell
77523 projects

Projects that are alternatives of or similar to react-nft-gallery

React Responsive Carousel
React.js Responsive Carousel (with Swipe)
Stars: ✭ 1,962 (+3824%)
Mutual labels:  gallery, react-component
SkyGallery
Create galleries by uploading images and videos. Powered by Sia Skynet.
Stars: ✭ 23 (-54%)
Mutual labels:  gallery, web3
React Awesome Slider
React content transition slider. Awesome Slider is a 60fps, light weight, performant component that renders an animated set of production ready UI general purpose sliders with fullpage transition support for NextJS and GatsbyJS. 🖥️ 📱
Stars: ✭ 2,343 (+4586%)
Mutual labels:  gallery, react-component
opensea-sales-twitter-bot
A Twitter bot that tweets Opensea sales for a given collection 🐳
Stars: ✭ 120 (+140%)
Mutual labels:  web3, nft
nft-app
How to create your own NFT and mint NFT token
Stars: ✭ 145 (+190%)
Mutual labels:  web3, nft
React Alice Carousel
React responsive component for building content galleries, content rotators and any React carousels
Stars: ✭ 419 (+738%)
Mutual labels:  gallery, react-component
nft-swap-sdk
Ethereum's missing p2p NFT and token swap library for web3 developers. Written in TypeScript. Powered by 0x.
Stars: ✭ 200 (+300%)
Mutual labels:  web3, nft
React Image Gallery
React carousel image gallery component with thumbnail support 🖼
Stars: ✭ 2,946 (+5792%)
Mutual labels:  gallery, react-component
hicetnunc-radio
Radio player for audio tracks in a tezos wallet.
Stars: ✭ 23 (-54%)
Mutual labels:  gallery, nft
Artion-Server
Artion API Server
Stars: ✭ 26 (-48%)
Mutual labels:  web3, nft
nft-website
NFT School: Community education platform for developers in the non-fungible token space.
Stars: ✭ 260 (+420%)
Mutual labels:  web3, nft
ape
The smart contract development tool for Pythonistas, Data Scientists, and Security Professionals
Stars: ✭ 339 (+578%)
Mutual labels:  web3, nft
webflow-nft-components
Connect web3 to Webflow without coding skills
Stars: ✭ 69 (+38%)
Mutual labels:  web3, nft
React Grid Carousel
React responsive carousel component w/ grid layout
Stars: ✭ 29 (-42%)
Mutual labels:  gallery, react-component
NFT-Dapp-Boilerplate
A highly scalable NFT and DEFI boilerplate with pre added web3 and different wallets with a focus on performance and best practices
Stars: ✭ 51 (+2%)
Mutual labels:  web3, nft
niftygate
Drop-in Access Control via NFT Ownership
Stars: ✭ 61 (+22%)
Mutual labels:  web3, nft
fetch-nft
🖼🎑🌠 A utility to fetch and easily display Ethereum & Solana NFTs in a common format given any wallet
Stars: ✭ 83 (+66%)
Mutual labels:  web3, nft
quorum.js
Quorum.js is an extension to web3.js providing support for JP Morgan's Quorum API
Stars: ✭ 37 (-26%)
Mutual labels:  web3
RecyclerViewCardGallery
RecyclerView实现循环banner,替代ViewPager方案。能够快速滑动并最终定位到居中位置(相比于原库支持了循环滑动)
Stars: ✭ 610 (+1120%)
Mutual labels:  gallery
hentai-downloader
ExHentai exhentai.org, e-hentai.org images gallery download to folder.
Stars: ✭ 37 (-26%)
Mutual labels:  gallery

React NFT Gallery

build status npm package npm package: minzipped size npm package: types code style: prettier module formats: cjs, esm

👾 Playground (Storybook)

React NFT Gallery is a React component to render any Ethereum address's NFTs as a gallery. The NFT assets for an address are resolved via the OpenSea API.

⚠️ Please note: This library is currently in beta and should not be considered stable until v1.0.0 is released.

This means:

  • The gallery may see breaking changes between minor versions until v1.0.0 is released.
  • The gallery may not always render/behave as expected across different browsers & browser versions. Please open an issue in this case.
  • The gallery may not render/behave as expected for your use case. Please open an issue in this case.

OpenSea API Key

OpenSea has recently added the requirement for an X-API-KEY header to be passed for any non-trivial requests to their /assets endpoint. By default, react-nft-gallery can now only fetch the first 20 assets for any provided ownerAddress.

The gallery's full capabilities are available by passing an OpenSea API key as the openseaApiKey prop, or by using a custom API endpoint.

To request an API key, please consult the API key form on the OpenSea docs.

Installation

npm i --save react-nft-gallery

Usage

ownerAddress is the only prop that is required out-of-the-box:

import { NftGallery } from 'react-nft-gallery';

// ...

return <NftGallery ownerAddress="vitalik.eth" />;

Using a custom API endpoint

To use a custom API endpoint, pass it via the apiUrl prop.

If the endpoint injects an OpenSea API key, set the isProxyApi prop to true. This allows for paginated requests without exposing the OpenSea API key in the client via openseaApiKey:

import { NftGallery } from 'react-nft-gallery';

// ...

return (
  <NftGallery
    ownerAddress="vitalik.eth"
    apiUrl="https://your-opensea-api-proxy.vercel.app"
    isProxyApi={true}
  />
);

API

interface NftGalleryProps {
  /**
   * Ethereum address (`0x...`) or ENS domain (`vitalik.eth`) for which the gallery should contain associated NFTs.
   * Required.
   */
  ownerAddress: string;

  /**
   * OpenSea API key, which is required for non-trivial use cases of the OpenSea API's `/assets` endpoint.
   * See the endpoint's documentation for more information: https://docs.opensea.io/reference/getting-assets
   */
  openseaApiKey?: string;

  /**
   * Set to `true` when using a proxy API to hide the OpenSea API key.
   * Otherwise the gallery disables pagination if `openseaApiKey` is also not provided.
   */
  isProxyApi?: boolean;

  /**
   * Set a custom API URL.
   */
  apiUrl?: string;

  /**
   * Auto retry (max. 10 times) after an API request failed.
   */
  autoRetry?: boolean;

  /**
   * Display asset metadata underneath the NFT.
   * Defaults to `true`.
   */
  metadataIsVisible?: boolean;

  /**
   * Display gallery in dark mode.
   * Defaults to `false`.
   */
  darkMode?: boolean;

  /**
   * Display gallery in showcase mode. Only NFTs specified in `showcaseItemIds` will be rendered.
   * Defaults to `false`.
   */
  showcaseMode?: boolean;

  /**
   * An array of IDs for assets that should be displayed when `showcaseMode` is active.
   * Each ID is formed by combining the asset's contract address and the asset's own tokenId: `{:assetContractAddress}/{:tokenId}`
   *
   * For example:
   *
   * ```jsx
   * showcaseItemIds={["0xabcdef.../123", "0xa1b2c3.../789"]}
   * ```
   */
  showcaseItemIds?: string[];

  /**
   * Enables/disables the lightbox being shown when a gallery item is clicked/tapped.
   * Defaults to `true`.
   */
  hasLightbox?: boolean;

  /**
   * Enables/disables a gallery item's title and collection name linking to the asset and collection on OpenSea, respectively.
   * Defaults to `true`.
   */
  hasExternalLinks?: boolean;

  /**
   * Renders the gallery as a single row with horizontal scrolling. Useful when rendering the gallery between other content.
   * Defaults to `false`.
   */
  isInline?: boolean;

  /**
   * Disables lazy loading and shows a "Load more" button to fetch the next set of gallery items.
   * Defaults to `false`.
   */
  hasLoadMoreButton?: boolean;

  /**
   * Overrides the default styling of the gallery's container.
   */
  galleryContainerStyle?: CSSProperties;

  /**
   * Overrides the default styling of all gallery item containers.
   */
  itemContainerStyle?: CSSProperties;

  /**
   * Overrides the default styling of all gallery item image containers.
   */
  imgContainerStyle?: CSSProperties;
}

Roadmap

  • feat: support ENS domain resolution in ownerAddress
  • feat: support keyboard navigation for lightbox
  • feat: remove "load more" button and auto-resolve all assets via recursive pagination on OpenSea API (P1)
  • feat: use card placeholders instead of spinner for loading phase (P1)
  • docs: document component props and common patterns/configurations better (P1)
  • feat: add transitions on thumbnail load, enter/exit lightbox, forward/back lightbox item (P2)
  • feat: support swiping in lightbox for touch devices (P2)
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].