React SDK

Results

The Results component is used to display results response from a search query.

Usage

Additional imports used in the examples:

Editable Example

Loading...

Grid display

Editable Example

Loading...

Product status

Currently three statuses are being supported, they are "out of stock", "sale" and "new arrival", they are hidden by default, to show them pass the showStatus prop,

See below list for implementation logic, the product will be:

  • Out of stock if the quantity is 0.
  • On sale if the price is lower than originalPrice.
  • A new arrival if its createdAt is within 30 days to the current date.
Editable Example

Loading...

Custom templating

You can opt-out of Search.io's default result design and go with your own, simply pass an object containing a html and css property via the template prop. Use the {{ expression }} syntax to embed your result's value. We're using Tempura as the template engine, learn more about the syntax here.

Editable Example

Loading...

Helpers

When using custom templating, a number of helpers are available to help you in writing the template, they are:

  • join - join an list of strings
  • date - format the ISO date string into human-readable string (UTC only)
Editable Example

Loading...

Props

NameTypeDefaultDescription
appearancelist | gridThe controlled value, passing this means you're ignoring the value in context.
defaultAppearancelist | gridlistThe uncontrolled value, will override the context value on mount.
showImagebooleantrueSets to show images
showVariantImagebooleanfalseSets to show variant images
showStatusbooleanfalseSets to show statuses
imageAspectRationumber | { list: number, grid: number}1The aspect ratio to force images to render to.
imageObjectFitstring | { list: string, grid: string }containThe aspect ratio to force images to render to. Valid objectFit values can be found in image props.
resultTemplate{html: string, css: string}The template code use to render a single result item.
resultContainerTemplateElement"div" \| "p" \| ..."div"The html element which will wrap each resultTemplate.
onResetTemplate() => void() => {}The callback for when the reset button was clicked.
openNewTabbooleanfalseIf true, open the result link in a new window tab.
allowBannersbooleantrueIf true, display banners along with results.