JasonStoltz

import React, { useEffect, useState } from 'react'
import PropTypes from 'prop-types'
import styled, { withTheme } from 'styled-components'
import { withSearch } from '@elastic/react-search-ui'
import _get from 'lodash/get'

import Slider from 'rc-slider'
import 'rc-slider/assets/index.css'

import { FacetContainer, FacetHeader } from './SearchFacet'

JasonStoltz

#!/usr/bin/env node

/**
 * Install:
 *
 * Download this file and give it executuable persmissions
 *
 * Usage:
 *
 * Uploading documents

JasonStoltz

// ...
<Layout
  // ...
  header={<SearchBox autocompleteSuggestions={true} />}
/>
// ...

JasonStoltz

const configurationOptions = {
  // ...
  autocompleteQuery: {
    suggestions: {
      types: {
        documents: {
          // Which fields to search for suggestions.
          fields: ["name"]
        },
        // How many suggestions appear.

JasonStoltz

<Layout
  header={<SearchBox />}
  bodyContent={<Results titleField="name" urlField="image_url" />}
  sideContent={
    <div>
      <Sorting
        label={"Sort by"}
        sortOptions={[
          {
            name: "Relevance",

JasonStoltz

import {
  PagingInfo,
  ResultsPerPage,
  Paging,
  Facet,
  SearchProvider,
  Results,
  SearchBox,
  Sorting
} from "@elastic/react-search-ui";

JasonStoltz

import { SearchProvider, Results, SearchBox } from "@elastic/react-search-ui";

JasonStoltz

export default function App() {
  return (
    <SearchProvider config={configurationOptions}>
      <div className="App">
        <Layout
          header={<SearchBox />}
          // titleField is the most prominent field within a result: the result header.
          bodyContent={<Results titleField="name" urlField="image_url" />}
        />
      </div>

JasonStoltz

const configurationOptions = {
  apiConnector: connector,
  searchQuery: {
    search_fields: {
      // 1. Search by name of video game.
      name: {}
    },
    // 2. Results: name of the video game, its genre, publisher, scores, and platform.
    result_fields: {
      name: {

JasonStoltz

const connector = new AppSearchAPIConnector({
  searchKey: "[YOUR_SEARCH_KEY]",
  engineName: "video-games",
  hostIdentifier: "[YOUR_HOST_IDENTIFIER]"
});