89 lines
1.7 KiB
Plaintext
89 lines
1.7 KiB
Plaintext
---
|
|
title: "useListPlans"
|
|
description: "Fetch the list of available plans"
|
|
---
|
|
|
|
import LearnHooksTip from '/snippets/learn-hooks-tip.mdx';
|
|
|
|
The `useListPlans` hook fetches all available plans configured in your Autumn dashboard. Use this to build custom pricing pages or plan selectors.
|
|
|
|
<LearnHooksTip />
|
|
|
|
## Parameters
|
|
|
|
<ParamField body="queryOptions" type="UseQueryOptions">
|
|
Optional [TanStack Query options](https://tanstack.com/query/latest/docs/framework/react/reference/useQuery) to customize caching and refetching behavior.
|
|
</ParamField>
|
|
|
|
## Returns
|
|
|
|
### `data`
|
|
|
|
Array of plan objects.
|
|
|
|
```tsx
|
|
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>
|
|
);
|
|
}
|
|
```
|
|
|
|
<Expandable title="Plan object">
|
|
|
|
```json
|
|
{
|
|
"id": "pro",
|
|
"name": "Pro Plan",
|
|
"description": null,
|
|
"group": null,
|
|
"version": 1,
|
|
"addOn": false,
|
|
"autoEnable": false,
|
|
"price": {
|
|
"amount": 10,
|
|
"interval": "month"
|
|
},
|
|
"items": [
|
|
{
|
|
"featureId": "messages",
|
|
"included": 1000,
|
|
"unlimited": false,
|
|
"reset": { "interval": "month" },
|
|
"price": null
|
|
}
|
|
],
|
|
"freeTrial": null,
|
|
"createdAt": 1771513979217,
|
|
"env": "sandbox",
|
|
"archived": false,
|
|
"baseVariantId": null
|
|
}
|
|
```
|
|
|
|
</Expandable>
|
|
|
|
### `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.
|