react-nft-slider

React NFT Slider

A React component that creates a carousel slider showcasing NFTs from a specific collection or wallet without the need for connecting a wallet or using Web3.js or Ether.js.

Features

• Shows NFTs from a collection using the collection address or wallet address
• Displays NFTs in a responsive and interactive slider
• Supports touch and mouse drag gestures for easy navigation
• Customizable styling and appearance
• Lightweight and easy to integrate into your React projects
• Better annotation in typescript projects

Installation

npm

npm install react-nft-slider

yarn

yarn add react-nft-slider

Usage

import React from "react";
import NFTSlider from "react-nft-slider";

const MyNftSlider = () => {
  const collectionAddress = "0x..."; // Replace with your desired collection address

  return (
    <div>
      <h1>My NFT Collection</h1>
      <NFTSlider collection={collectionAddress} />
    </div>
  );
};

export default MyNftSlider;

Props

name	value	description
showNftsBy	‘owner’, ‘collection’	by default, it's set to ‘collection’ and it will be loading the NFTs of the collection. If set to, ‘owner’ it loads the NFTs of the owner address (wallet address) passed to the component.
collection	string	(required) The address of the NFT collection to fetch NFTs
owner	string	the wallet address of the NFT owner to fetch NFTs. ( set the showNftsBy prop to ‘owner’ to use this)
chain	‘ETHEREUM’, ‘POLYGON’	Define the chain your collection address is from. The default is set to ‘ETHEREUM’ ( more chains will be supported )
dataSource	‘RARIBLE’	Define the Source you want to get the data from
size	number	Set the number of nft items fetched in each request
loadingElement	JSX.Element	Define an JSX Element as loading indicator

License

This project is licensed under the MIT License.