Property Results

PropertyResults

The PropertyResults component will render search results to the page.

It will render each property as one of the item components provided depending on whether the hash is #/grid or #/list. These components will receive the property as a prop.

You can also specify a defaultView prop as either 'grid', 'list' or 'map' for that view to be rendered when one of the other hashes isn't present.

import { PropertyResults } from 'homeflowjs/properties';

<PropertyResults

GridItem={GridItem}

ListItem={ListItem}

defaultView="grid"

infiniteScroll

/>

Props

• GridItem - Component to render for each property in grid view. Default is null.
• ListItem - Component to render for each property in list view. Default is null.
• defaultView - The default view to display when no hash is present. Default is list.
• infiniteScroll enables infinite scroll (automatically loading the next page of results when the user scrolls to the bottom of the results container). Default is false.
• noMap - pass this if you do not want the PropertyResults component to include a map view (in case you want to render the map separately).

The inserts prop

caution

The inserts prop is currently in alpha, therefore it does not support multiple components.

• inserts can optionally be passed to the PropertyResults as an array in order to render other components at certain intervals between the search results. This is commonly used to insert adverts, banners or call-to-actions. The array must contain an object with the component and frequency keys. The component is what you would like to render and the frequency is how often you would like to render it, i.e you want your banner to after render every third item in the grid.

See example below:

<PropertyResults

GridItem={GridItem}

defaultView="grid"

inserts={[

{ component: <CTAImageBackgroundWithProps />, frequency: 3 }, // appears every 3 slots

]}

/>

LoadMoreButton

If you wish to control pagination asynchronously using a button, you can use the LoadMoreButton component. It will automatically disappear once there are no more properties to render.

import { LoadMoreButton } from 'homeflowjs/properties';

<LoadMoreButton className="load-more-button">

Load more properties

</LoadMoreButton>

SavePropertyButton

Button to add/remove a property from the user's saved properties.

import { SavePropertyButton } from 'homeflowjs/properties';

<SavePropertyButton

className="fav-link"

propertyId={property.property_id}

UnsavedComponent={<i className="far fa-heart" />}

SavedComponent={<i className="fas fa-heart" />}

/>

Props

• propertyId - The ID of the property.
• UnsavedComponent - component or JSX to render when the property is not currently saved.
• SavedComponent - component or JSX to render when the property is saved.

RemoveSavedPropertyButton

A button/link to remove a saved property from the user's collection. This is mainly useful for custom user profile systems where the user can manage their saved properties.

import { RemoveSavedPropertyButton } from 'homeflowjs/properties';

// this would generally be inside a loop rendering each of the user's saved properties

<RemoveSavedPropertyButton propertyId={property.property_id}>

Remove

</RemoveSavedPropertyButton>

Props

• propertyId - The ID of the property.

SortOrderSelect

import { SortOrderSelect } from 'homeflowjs/properties';

<SortOrderSelect reactSelect>

<option value="most-expensive-first">

Price high &gt; low

</option>

<option value="least-expensive-first">

Price low &gt; high

</option>

<option value="most-recent-first">

Most recent first

</option>

<option value="most-recently-updated-first">

Most recently updated first

</option>

</SortOrderSelect>

Props

• reactSelect - renders a decorated dropdown instead of a regular <select> if present.
• defaultSort - The default sort order.