> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tappify.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Follow the page's filters

> Read the host page's range, platform and country pickers so your numbers move with them.

The Analytics page carries a date range picker. `useTapFilters()` gives you its current value
there and re-renders when the owner changes it; `platform` and `country` come through the same
call but hold the project's defaults today (iOS, all countries), because the host has no picker
for them yet. On a surface with no picker bar — your own page, or a widget on another host
page — the same call gives you the project's current defaults and stays put.

```tsx theme={null}
import { useTapFilters, useTapQuery } from "@tappify/extension-sdk";

export function Downloads() {
  const filters = useTapFilters();
  const downloads = useTapQuery({
    kind: "series",
    metric: "downloads",
    range: filters.range,
    platform: filters.platform === "all" ? undefined : filters.platform,
  });

  return <span>{downloads.data?.points.length ?? 0} days</span>;
}
```

## What you get

| Field                    | Type                          | Means                                                       |
| ------------------------ | ----------------------------- | ----------------------------------------------------------- |
| `range.from`, `range.to` | `YYYY-MM-DD` strings          | The window the page is showing                              |
| `range.preset`           | `"7d" \| "30d" \| "90d"`      | The preset behind that window, absent on the one-year range |
| `platform`               | `"ios" \| "android" \| "all"` | The project's platform; `ios` until the host has a picker   |
| `country`                | a country code or `"all"`     | The country picker                                          |

## What travels on its own

A procedure call carries all three without you passing anything: your server reads the same
window in `request.context.filters`, and a widget that shows one number needs no code to
follow the picker.

A data query is written by you, so its `range` and `platform` are the ones in the query
object above. The country picker is the exception — the host adds it to every read where a
country is picked.

Both hooks key their cache on the install, the query or input, and the filters, so changing
a picker fetches and changing back reads the entry already held.

Read the filters yourself when what you show is not what you asked for: a label, a
comparison against the previous window, a copy button.

```tsx theme={null}
import { useTap, useTapFilters } from "@tappify/extension-sdk";

export function RangeLabel() {
  const tap = useTap();
  const filters = useTapFilters();

  return (
    <span>
      {tap.format.date(filters.range.from)} to {tap.format.date(filters.range.to)}
    </span>
  );
}
```

`tap.format` renders numbers, currencies, dates and relative times the way Tappify renders
them, in the locale and time zone the host is running in. Use it rather than `Intl` directly
so your numbers and Tappify's read as one page.