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.
