build69
build69  /  Components  /  App  /  PropertySearch

PropertySearch

v1.0.7Updated 19 Oct 2026

Map-based property search PAGE: heading, result summary and saved-search action over a PropertyMapSearch - a scrollable list of estate cards beside a clustered-marker map, with filters and one shared selection (fb_73127df0, condo69 house menu). Full-page template with baked-in demo projects (Bangkok and Nonthaburi estates, baht price ranges, land in square wah), every experience state wired - loading, empty, error, 403 and 404 - and the base map still supplied by the host through renderMap.

View source← Back to catalog

Preview

Live · 9 stories
DefaultOpen ↗
▸Why this is recommendedpropertyreal-estatemapsearch+5

The default, out-of-the-box PropertySearch.

Recommended for+14
  • ✓A property search screen with a map next to the results
  • ✓A housing-estate or project browse page for a property portal
  • ✓Store, branch or site locator pages with filters
  • ✓A search page where results have coordinates and one can be picked
Tags+6
propertyreal-estatemapsearchlistingpageappestatedefault
Features+4
  • i18n: a labels prop overrides every built-in string; English defaults, brand-free copy, and searchLabels translates the search underneath in the same pass
  • All six experience states: ready, loading, empty, error with retry, 403 and 404, each a real screen rather than a message on the populated one
  • Baked-in demo projects with the shape this market uses: baht price RANGES, land in square wah, usable area in square metres, bedroom lists and Thai districts
  • The photo rule ships narrow: the template permits exactly its own inline thumbnails plus relative / http(s) URLs, so a data: URL in a row a host passes is still refused
  • Pass properties to search real rows, and renderMap to put Google / Mapbox / MapLibre tiles behind the markers - no paid dependency is added by the template
  • Responsive: side-by-side panes from lg up, one pane at a time behind a List / Map switch below it
Not recommended for−2
  • ✕A single property detail page (compose DetailPage or ProductDetail)
  • ✕A list with no geography (use ListPage or DataTable)
  • ✕Anything that needs routing or directions

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "PropertySearch" })

Usage

import { PropertySearch } from '@/components/pages/property-search';

<PropertySearch properties={projects} onRetry={refetch} />;

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
properties

The listings to search. Defaults to the template demo projects

PropertyListing[]—
state

Which experience to render. Default ready

'ready' | 'loading' | 'empty' | 'error' | 'forbidden' | 'notFound'—
onRetry

Retry handler on the error state

() => void—
onSaveSearch

Saved-search action in the header; the button appears only when a handler is given

() => void—
renderMap

Draw the base map behind the marker layer. Without it the markers sit on the plain built-in surface

(surface: PropertyMapSurface) => React.ReactNode—
searchLabels

Strings of the search component underneath, so one translation pass covers the whole screen

Partial<PropertyMapSearchLabels>—
imageSrcAllowed

May a photo URL load? Defaults to the template thumbnails plus relative / http(s) URLs

(src: string) => boolean—
labels

Override every built-in string of the page (i18n). Merged over DEFAULT_PROPERTY_SEARCH_LABELS; the defaults are English

Partial<PropertySearchLabels>—
className

Wrapper class override

string—

Related

Platform docsAll componentsSource files