A React library that allows you to quickly implement search experiences

# Install React Search UI and a Connector, like the Elastic App Search Connector
npm install --save @elastic/react-search-ui @elastic/search-ui-app-search-connector

import React from "react";
import AppSearchAPIConnector from "@elastic/search-ui-app-search-connector";
import { SearchProvider, Results, SearchBox } from "@elastic/react-search-ui";
import { Layout } from "@elastic/react-search-ui-views";

import "@elastic/react-search-ui-views/lib/styles/styles.css";

const connector = new AppSearchAPIConnector({
  searchKey: "search-371auk61r2bwqtdzocdgutmg",
  engineName: "search-ui-examples",
  hostIdentifier: "host-2376rb"
});

export default function App() {
  return (
    <SearchProvider
      config={{
        apiConnector: connector
      }}
    >
      <div className="App">
        <Layout
          header={<SearchBox />}
          bodyContent={<Results titleField="title" urlField="nps_link" />}
        />
      </div>
    </SearchProvider>
  );
}

<SearchProvider config={config}>
  <WithSearch
    mapContextToProps={({ searchTerm, setSearchTerm, results }) => ({
      searchTerm,
      setSearchTerm,
      results
    })}
  >
    {({ searchTerm, setSearchTerm, results }) => {
      return (
        <div>
          <input
            value={searchTerm}
            onChange={e => setSearchTerm(e.target.value)}
          />
          {results.map(r => (
            <div key={r.id.raw}>{r.title.raw}</div>
          ))}
        </div>
      );
    }}
  </WithSearch>
</SearchProvider>

const connector = new AppSearchAPIConnector({
  searchKey: "search-371auk61r2bwqtdzocdgutmg",
  engineName: "search-ui-examples",
  hostIdentifier: "host-2376rb"
});

<SearchProvider
  config={{
    apiConnector: connector
  }}
>
  <div className="App">{/* Place Components here! */}</div>
</SearchProvider>

<SearchProvider
  config={{
    apiConnector: connector
  }}
>
  <WithSearch
    mapContextToProps={({ searchTerm, setSearchTerm }) => ({
      searchTerm,
      setSearchTerm
    })}
  >
    {({ searchTerm, setSearchTerm }) => (
      <div className="App">{/* Work directly with state and actions! */}</div>
    )}
  </WithSearch>
</SearchProvider>

<SearchProvider
  config={{
    apiConnector: connector
  }}
>
  <div className="App">
    <div className="Header">
      <SearchBox />
    </div>
    <div className="Body">
      <Results titleField="title" urlField="nps_link" />
    </div>
  </div>
</SearchProvider>

import "@elastic/react-search-ui-views/lib/styles/styles.css";

import { Layout } from "@elastic/react-search-ui-views";

<Layout header={<SearchBox />} bodyContent={<Results />} />;