OpenSea NFT React Gallery

OpenSea NFT Gallery is a React component to render any OpenSea collection in your website as gallery. It includes filtering, sorting and other cool features.

Demo

https://opensea-nft-react-gallery-demo.vercel.app/

How to use

First of all, you need to generate metadata json file to fetch NFT collection. OpenSea API do not allow to retrieve more than 50 assets per request, so we will need to have a JSON file.

You can generate it here: https://opensea-nft-json-generator-frontend.vercel.app/

Copy and host this file in any directory in the cloud and copy the URL path, you will need it to send as collection-metadata-url={your_url}

Installation

npm install opensea-nft-react-gallery

``
import { OpenSeaNFTReactGallery } from "opensea-nft-react-gallery";

function Example() {
return
}
`

Using with Next.js

index.tsx

`
const NFTGallery = dynamic(() => import("components/NFTGallery/NFTGallery"), {
ssr: false,
});

export default function Page() {
return ;
}
`

components/NFTGallery/NFTGallery.tsx

`
import React, { FC } from "react";
import { OpenSeaNFTReactGallery } from "opensea-nft-react-gallery";

const NFTGallery: FC = () => {
return (

);
};

export default Gallery;
`

$3

This project uses storybook: npm run storybook`