Skip to content
Libraries for the fast development of modern, engaging search experiences.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Fix CI Feb 12, 2019
examples/sandbox Release: v0.7.0 Apr 19, 2019
packages
.eslintrc.js Added support for exporting ES modules Dec 13, 2018
.gitignore
.nvmrc List node versions Feb 5, 2019
ADVANCED.md Added npm install to ADVANCED.md Apr 22, 2019
CHANGELOG.md Update package lock files and CHANGELOG Apr 19, 2019
CONTRIBUTING.md Appended contributing to readme, updated contributing to a pointer to… Apr 11, 2019
LICENSE
README.md Pairs the "prior" to PR steps Apr 11, 2019
lerna.json Release: v0.7.0 Apr 19, 2019
package-lock.json Fixes Feb 11, 2019
package.json Updated publishing instructions Apr 16, 2019
pull_request_template.md Update pull_request_template.md Apr 19, 2019

README.md

CircleCI buidl BETA Gitter

Libraries for the fast development of modern, engaging search experiences. 🎉

Contents


About Search UI 🚀

Search UI allows you to quickly implement search experiences without re-inventing the wheel.

It supports React and works with any search API.

Features 👍

  • You know, for search: Maintained by Elastic, the team behind Elasticsearch.
  • Speedy Implementation - Build search with a search box, results view, sorting, and more, with a few lines of code.
  • Customizable - Tune the Components, markup, styles, and behaviors to your liking.
  • Smart URLs - Searches, paging, filtering, and more, are captured in the URL for direct result linking.
  • Headless - Leverage our application logic, provide your own Components or views.
  • Flexible - Not just for React. Use with any JavaScript library, even vanilla JavaScript.

Getting started 🐣

Looking for a great search API? Elastic App Search has a slick dashboard, powerful features, and leading relevance.

Install the React Search UI and the App Search connector.

# 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

Note: The Search UI is in beta. We do not recommend production use.

Creating a Search UI

Use out of the box components, styles, and layouts to build a search experience quickly.

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>
  );
}

Or go headless:

<SearchProvider config={config}>
  {({ 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>
    );
  }}
</SearchProvider>

A search UI is made up of four key areas, which you can expand and customize:

  1. Connectors
  2. SearchProvider
  3. Components
  4. Styles and Layout

1. Connectors

Connectors are modules that tell Search UI how to connect and communicate with a particular API.

Search UI currently provides two Connectors:

  1. Elastic App Search: search-ui-app-search-connector
  2. Elastic Site Search: search-ui-site-search-connector

The example search UI above uses the Elastic App Search Connector:

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

Search UI can connect to any web based Search API. Read the advanced README for more information.

2. SearchProvider

The SearchProvider object will tie all of your Components together so that they work as a cohesive application.

It's where you configure your UI, acting as the state manager between "State" and "Actions".

The overall flow is like this:

Components -> SearchProvider -> Connector -> Search API (App Search)
  1. A user takes an action - like submitting a search box or applying a filter - using a Component.

  2. SearchProvider will trigger an API call via the Connector you've configured to fetch search results.

SearchProvider is lightweight:

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

But it's deeply configurable.

Read the Advanced Configuration Guide.

3. Components

Components are the building blocks from which craft your search experience.

Each Component - like SearchBox and Results - is a child of the SearchProvider object:

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

The following Components are available:

  • SearchBox
  • Results
  • ResultsPerPage
  • Facet
  • Sorting
  • Paging
  • PagingInfo
  • ErrorBoundary

Read the Component Reference for a breakdown.

4. Styles and Layout

For basic styles, include:

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

For a basic layout, which helps quickly get a UI bootstrapped, use the Layout Component.

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

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

The provided styles and layout can be found in the react-search-ui-views package.

Read the Customization guide for more details.

FAQ 🔮

Where can I learn more?

The Advanced README contains several useful guides. 😎

Is Search UI only for React?

Nope. Search UI is "headless".

You can write support for it into any JavaScript framework. You can even use vanilla JavaScript.

Read the Headless Core Guide for more information.

Can I build my own Components?

Yes! Absolutely.

Check out the Build Your Own Component Guide.

Does Search UI only work with App Search?

Nope! We do have two first party connectors: Site Search and App Search.

But Search UI is headless. You can use any search API.

Read the Build Your Own Connector Guide to learn more.

Where do I report issues with the Search UI?

If something is not working as expected, please open an issue.

Where can I go to get help?

Connect with the community and maintainers directly on Gitter.

If you are using an Elastic product as your connector, try the Elastic community...

Contribute 🚀

We welcome contributors to the project. Before you begin, a couple notes...

  • Read the Search UI Contributor's Guide.
  • Prior to opening a pull request, please:
    • Create an issue to discuss the scope of your proposal.
    • Sign the Contributor License Agreement. We are not asking you to assign copyright to us, but to give us the right to distribute your code without restriction. We ask this of all contributors in order to assure our users of the origin and continuing existence of the code. You only need to sign the CLA once.
  • Please write simple code and concise documentation, when appropriate.

License 📗

Apache-2.0 © Elastic

Thank you to all the contributors!

You can’t perform that action at this time.