Property Search

`SearchForm`

The SearchForm component should wrap all fields on your search form.

import React from 'react';
import { SearchForm } from 'homeflowjs/search';

const SearchFormExample = () => (
  <SearchForm>
    {/* Additonal form fields and other JSX will go here */}
  </SearchForm>
)

Here is an example of a complete search form:

import React from 'react';
import {
  SearchForm,
  BedroomsSelect,
  ChannelRadioButton,
  LocationInput,
  PriceSelect,
  RadiusSelect,
  TagCheckBox,
} from 'homeflowjs/search';

const ThemeSearchForm = () => (
  <div className="container jumbotron">
    <SearchForm>
      <div className="row">
        <h2 className="col-md-6">Search for your new home</h2>

        <div className="col-md-3">
          <div className="form-check">
            <label className="home-search__channel" htmlFor="channel-sales">
              <ChannelRadioButton value="sales" id="channel-sales" />
              <span>Buy</span>
            </label>
          </div>
        </div>

        <div className="col-md-3">
          <div className="form-check">
            <label className="home-search__channel" htmlFor="channel-lettings">
              <ChannelRadioButton value="lettings" id="channel-lettings" />
              <span>Rent</span>
            </label>
          </div>
        </div>
      </div>

      <div className="row">
        <div className="col-md-3">
          <LocationInput className="form-control" />
          <RadiusSelect className="form-control" />
        </div>

        <div className="col-md-3 form-group">
          <PriceSelect type="min" />
          <PriceSelect type="max" />
        </div>

        <div className="col-md-3 form-group">
          <BedroomsSelect type="min" className="form-control" />
          <BedroomsSelect type="max" className="form-control" />
        </div>

        <div className="col-md-3">
          <div className="form-check">
            <input type="checkbox" id="status" name="status" value="all" className="form-check-input" />
            {' '}
            <label className="form-check-label" htmlFor="status">Include Sold/Let</label>
          </div>
        </div>
      </div>

      <div className="row">
        <div className="col-md-2">
          <label>
            <TagCheckBox name="house" />
            {' '}
            House
          </label>
        </div>

        <div className="col-md-2">
          <label>
            <TagCheckBox name="flat" />
            {' '}
            Flat
          </label>
        </div>

        <div className="col-md-2">
          <label>
            <TagCheckBox name="commercial" />
            {' '}
            Commercial
          </label>
        </div>

        <div className="col-md-4 col-md-offset-2">
          <button className="btn btn-primary" type="submit">Search</button>
        </div>
      </div>
    </SearchForm>
  </div>
);

export default ThemeSearchForm;

Remember when you render your component to wrap it in the withHomeflowState higher-order component to ensure it is passed the relevant state:

import ReactDOM from 'react-dom';
import { withHomeflowState } from 'homeflowjs';

import SearchForm from '../js/components/search-form';

window.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    withHomeflowState(SearchForm),
    document.getElementById('property-search-form'),
  );
});

Props

`defaultSort` : String

The default sort order for results. Can be one of the following strings:

least-expensive-first
most-expensive-first
most-recent-first
most-square-feet-first
least-square-feet-first
most-recently-launched-first
most-recently-updated-first

`submitCallback` : Function

An optional callback that will be invoked when the form is submitted. It can be used for firing analytics events etc.

`LocationInput`

The LocationInput component will render a search box complete with autosuggest functionality.

import React from 'react';
import { LocationInput } from 'homeflowjs/search';

<LocationInput className="form-control" />

Props

Prop	Type	Description
handleSubmit	Function	Submit handler for the form.
placeholder	String	The placeholder text displayed in the input. Default is 'Enter a location...'

`ChannelRadioButton`

The ChannelRadioButton component will render a single radio button for channel based on the type provided.

import React from 'react';
import { ChannelRadioButton } from 'homeflowjs/search';

<label className="home-search__channel" htmlFor="channel-sales">
  <ChannelRadioButton value="sales" id="channel-sales" />
  <span>Buy</span>
</label>

<label className="home-search__channel" htmlFor="channel-lettings">
  <ChannelRadioButton value="lettings" id="channel-lettings" />
  <span>Rent</span>
</label>

Props

Prop	Type	Description
value	String	Should be 'sales' or 'lettings'

`PriceSelect`

The PriceSelect component will render a select for min or max price based on the type provided.

The price options should change automatically based on the selected channel.

Pass the reactSelect prop to render a decorated dropdown or omit it to render a normal select.

import React from 'react';
import { PriceSelect } from 'homeflowjs/search';

<PriceSelect type="min" reactSelect />
<PriceSelect type="max" reactSelect />

Props

Prop	Type	Description
`type`	String	Should be 'min' or 'max'.
`priceConfig`	Object	Allows setting custom price options and other config (see below)
`reactSelect`	Boolean	Whether to use the reac-select library to render a decorated dropdown

`priceConfig`

priceConfig can be used to set custom prices for sales and lettings. You can also include lettingsAs: 'pw' to display lettings prices as per-week instead of per-month:

<PriceSelect
  type="min"
  priceConfig={{
    salesPrices: [1000, 2000, 3000],
    lettingsPrices: [100, 200, 300],
    lettingsAs: 'pw',
  }}
/>

`RadiusSelect`

The RadiusSelect component will render a dropdown for selecting radius.

import React from 'react';
import { RadiusSelect } from 'homeflowjs/search';

const radiusOptions = [
  { value: '1-miles', label: '+ 1 mile' },
  { value: '2-miles', label: '+ 2 miles' },
  { value: '3-miles', label: '+ 3 miles' },
  { value: '5-miles', label: '+ 5 miles' },
  { value: '10-miles', label: '+ 10 miles' },
  { value: '15-miles', label: '+ 15 miles' },
  { value: '20-miles', label: '+ 20 miles' },
  { value: '30-miles', label: '+ 30 miles' },
];

<RadiusSelect options={radiusOptions} />

Props

Prop	Type	Description
`options`	Array	An array of objects containing a `label` and `value` for each option to override the defaults
`reactSelect`	Boolean	Whether to render a decorated dropdown

`BedroomsSelect`

The BedroomsSelect component will render min or max price select inputs.

Pass the reactSelect prop to render a decorated dropdown or omit it to render a normal select.

import React from 'react';
import { BedroomsSelect } from 'homeflowjs/search';

<BedroomsSelect type="min" reactSelect />
<BedroomsSelect type="max" reactSelect />

Props

Prop	Type	Description
`type`	String	Should be 'min' or 'max'.
`bedValues`	Array	You can override the default options for beds.
`reactSelect`	Boolean	Whether to use the reac-select library to render a decorated dropdown

bedValues takes by default an array of numbers, however, it can also take an array of objects with the structure { label: String, value: Number } to provide search options such as { label: 'Studio', value: 0 }

`GenericSearchField`

If you need a form field for which there isn't a component provided, or you need more customisation, you can use the GenericSearchField component.

By passing a type prop, you can render either a text <input> or a <select> which will be hooked up to the relevant redux state and action (although make sure you only use valid camelCase homeflow search parameters as the name).

This example will render a <select> field to match properties created in a number of days:

import React from 'react';
import { GenericSearchField } from 'homeflowjs/search';

const NewerThanSelect = () => (
  <GenericSearchField type="select" name="createdAgo">
    <option value="5">Newer than 5 days</option>
    <option value="10">Newer than 10 days</option>
    <option value="15">Newer than 15 days</option>
  </GenericSearchField>
)

`SaveSearchButton`

A button to add or remove (toggle) the current search to the user's saved searches.

import { SaveSearchButton } from 'homeflowjs/search';

<SaveSearchButton
  className="fav-link"
  UnsavedComponent={<i className="far fa-heart" />}
  SavedComponent={<i className="fas fa-heart" />}
/>

`SavedSearch`

Useful in custom user profile systems where the user can manage their saved searches, this renders each search/alert with a dropdown to allow the user to change the alert frequency and links to visit or delete the search.

import React from 'react';
import { connect } from 'react-redux';
import { SavedSearch } from 'homeflowjs/search';
import { uniqueKey } from 'homeflowjs';

const SavedSearches = ({ savedSearches }) => {
  if (!savedSearches) {
    return (
      <p>You have not saved any searches yet.</p>
    );
  }

  return (
    <div>
      {savedSearches.map(search => <SavedSearch search={search} key={uniqueKey()} />)}
    </div>
  );
};

const mapStateToProps = state => ({
  savedSearches: state.search.savedSearches,
});

export default connect(mapStateToProps)(SavedSearches);

Props

search - The search object.

Props

Prop	Type	Description
`search`	Object	The search object - is required
`visitSearchLabel`	String	Label for viewing the search. Default: `Visit`
`removeSearchLabel`	String	Label for deleting the search. Default: `Remove`
`frequencyLabel`	String	Label for the dropdown values. Default: `Email me matching properties:`
`deleteButtonClass`	String	Class for the delete search button
`visitButtonClass`	String	Class for the visit search button
`selectClass`	String	Class for the select/react select wrapper.
`reactSelect`	Boolean	Whether to use the reac-select library to render a decorated dropdown

SearchForm#

Props#

defaultSort : String#

submitCallback : Function#

LocationInput#

Props#

ChannelRadioButton#

Props#

PriceSelect#

Props#

priceConfig#

RadiusSelect#

Props#

BedroomsSelect#

Props#

GenericSearchField#

SaveSearchButton#

SavedSearch#

Props#

Props#

`SearchForm`

Props

`defaultSort` : String

`submitCallback` : Function

`LocationInput`

Props

`ChannelRadioButton`

Props

`PriceSelect`

Props

`priceConfig`

`RadiusSelect`

Props

`BedroomsSelect`

Props

`GenericSearchField`

`SaveSearchButton`

`SavedSearch`

Props

Props