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
  ]}
/>

also, there's an alternative inserts logic, it works via indexes. It's used when you want to show a component after a specific index in the property list. Similar to the frequency, the array must contain an object with the component and index keys. The component is what you would like to render and the index indicates the position of the property card after which the component will be rendered. It supports multiple inserts.

See example below:

<PropertyResults
  ListItem={ListItem}
  inserts={[
    { component: <CTAImageBackgroundWithProps />, index: 5 }, // appears after 5th property
    { component: <CTAImageBackgroundWithProps />, index: 15 }, // appears after 15th property
  ]}
/>

`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.