Follow the page's filters

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.

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.

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.

Start

Build

Test

Publish

Reference

What you get

What travels on its own

​What you get

​What travels on its own

What you get

What travels on its own