​
useMarketplaceConfig

The useMarketplaceConfig hook retrieves your Marketplace’s configuration, including collections, social links, title, and other settings from Builder.

import { useMarketplaceConfig } from "@0xsequence/marketplace-sdk/react";

## Into your React component:

const data = useMarketplaceConfig();
​
useMarketplaceConfig
​
* return properties

​
useListCollectibles

The useListCollectibles hook retrieves the current listings and offers in a collection from your Marketplace. Useful for accessing and managing listings and offers efficiently.

import { OrderSide } from '@0xsequence/marketplace-sdk';
import { useListCollectibles } from '@0xsequence/marketplace-sdk/react';

## Into your React component:

const {
  data: collectibles,
  isLoading: collectiblesLoading,
  fetchNextPage: fetchNextCollectibles,
} = useListCollectibles({
  chainId,
  collectionAddress,
  filter: {
    // # Optional filters
    includeEmpty,
    searchText,
    properties,
  },
  side: OrderSide.listing,
});

const collectiblesFlat =
  collectibles?.pages.flatMap((p) => p.collectibles) ?? [];

return (
  <div>
    {collectiblesFlat?.map((collectible) => (
      // Your Collectibles component
    ))}
  </div>
);
​
useListCollectibles
​
* params
​
* return properties

​
useListCollectiblesPaginated

The useListCollectiblesPaginated hook efficiently retrieves and manages current listings and offers from your Marketplace, making it ideal for displaying paginated NFTs within a collection.

import { OrderSide } from '@0xsequence/marketplace-sdk';
import { useListCollectiblesPaginated } from '@0xsequence/marketplace-sdk/react';

const chainId = 137;
const searchText = "";
const enabled = true;
const includeEmpty = true;
const properties = [];
const pageSize = 30;
const currentPage = 1;
const collectionAddress = "0x0e5566a108e617baedbebb44e3fcc7bf03e3a839";

## Into your React component:

const {
    data: collectiblesResponse,
    isLoading: collectiblesLoading,
} = useListCollectiblesPaginated({
  chainId: String(chainId),
  collectionAddress,
  side: OrderSide.listing,
  filter: {
    // # Optional filters
    includeEmpty,
    searchText,
    properties,
  },
  page: {
    page: currentPage,
    pageSize,
  },
  query: {
    page: currentPage,
    pageSize,
    enabled,
  },
});

const collectiblesList = collectiblesResponse?.collectibles ?? [];

return (
  <div>
    {collectiblesList?.map((collectible) => (
      // Your Collectibles component
    ))}
  </div>
);
​
useListCollectiblesPaginated details
​
* params
​
* return properties

​
useCountOfCollectables

The useCountOfCollectables hook returns the number of NFTs in a collection.

import { OrderSide } from '@0xsequence/marketplace-sdk';
import { useCountOfCollectables } from '@0xsequence/marketplace-sdk/react';

const countOfCollectables = useCountOfCollectables({
  chainId,
  collectionAddress,
  side: OrderSide.listing,
  filter: {
    searchText: text,
    includeEmpty,
    properties,
  },
});
​
useCountOfCollectables details
​
* params
​
* return properties

Was this page helpful?