Skip to main content
The useListPlans hook fetches all available plans configured in your Autumn dashboard. Use this to build custom pricing pages or plan selectors.
Learn how to setup Autumn hooks in the Getting Started guide.

​
Parameters

​
queryOptions
UseQueryOptions
Optional TanStack Query options to customize caching and refetching behavior.

​
Returns

​
data

Array of plan objects. 
import { useListPlans } from "autumn-js/react";

export default function PlansList() {
  const { data, isLoading } = useListPlans();

  if (isLoading) return <div>Loading plans...</div>;

  return (
    <ul>
      {data?.map((plan) => (
        <li key={plan.id}>
          {plan.name} - {plan.price ? `$${plan.price.amount}/${plan.price.interval}` : 'Free'}
        </li>
      ))}
    </ul>
  );
}

​
isLoading

Boolean indicating whether the plans are currently being fetched.

​
error

Any error that occurred while fetching plans.

​
refetch()

Function to manually refetch the plans list.