Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.coinlist.co/llms.txt

Use this file to discover all available pages before exploring further.

After OAuth, you can load every sale the current user can see and render them with the SDK — no hand-written HTTP integration for the common case.

​
Prerequisites

  • CoinListProvider with working getAccessToken (session established on your backend)
  • User signed in: your getAccessToken returns a non-null access token after OAuth (see the OAuth recipe)
OffersGrid uses useCoinListOffers internally and renders a responsive grid of offer cards with loading, error, and empty states. 
"use client";

import { OffersGrid } from "@coinlist-co/react/client/components";

export function OffersSection() {
  return (
    <OffersGrid
      maxColumns={3}
      onOfferClick={(offer) => {
        // Navigate or open your detail route — offer.id is the API offer id
        console.log("Selected offer", offer.id);
      }}
    />
  );
}
Optional props:
  • maxColumns — upper bound for the grid when space allows (default 3)
  • loading, error, emptyState — replace default slots with your own React nodes
  • onOfferClick — when set, cards become interactive; omit for read-only lists

​
Lower-level APIs

Open these sections when you need custom layouts or non-React code.
Use useCoinListOffers from @coinlist-co/react/client/hooks when you want full control over markup but still prefer reactive loading state.The hook exposes offersState:
  • LOADING — provider not ready or request in flight
  • ERROR — reason is not-authenticated or generic-error
  • CONTENT — offers is every page of offers merged (same data as fetchAllOffers)
"use client";

import { useCoinListOffers } from "@coinlist-co/react/client/hooks";

export function CustomOffersLayout() {
  const { offersState } = useCoinListOffers();

  if (offersState.type === "LOADING") return <p>Loading…</p>;
  if (offersState.type === "ERROR") return <p>Could not load offers.</p>;

  return (
    <ul>
      {offersState.offers.map((offer) => (
        <li key={offer.id}>{offer.tagline ?? offer.slug}</li>
      ))}
    </ul>
  );
}
Inside React you usually reach these through useCoinList():
  • coinlist.fetchAllOffers() — iterates every paginated page and returns all offers (throws NotAuthenticatedError if the user is not logged in)
  • coinlist.fetchOffersPage(params) — one page of API results when you implement your own pagination UI
"use client";

import { useCoinList } from "@coinlist-co/react";
import { useEffect } from "react";

export function OffersDebugLogger() {
  const { coinlist, isReady } = useCoinList();

  useEffect(() => {
    if (!isReady) return;
    void coinlist.fetchAllOffers().then((offers) => {
      console.log(offers.length);
    });
  }, [coinlist, isReady]);

  return null;
}
For imperative, non-hook usage, create a CoinListClient with createCoinListClient from @coinlist-co/react or @coinlist-co/react/client/core.
The SDK calls the same API documented in the API reference. Use raw HTTP only if you are not using React, or you need fields or flows the SDK does not expose yet. You still need a valid Bearer access token from your OAuth session.

​
Next step

Display offer details

Load full offer details for an id from the grid or fetchAllOffers.