@elastic/react-search-ui-views

react-search-ui-views

NOTE: This library is in an early Beta period, it is not yet recommended for production use

This is the view layer for react-search-ui.

This library provides view implementations for all of React Search UI's components along with corresponding CSS, and a few layout components.

The components provided here have no logic behind them, they are simple, stateless, view-only components.

Usage

import { Layout, Result, SearchBox } from "@elastic/react-search-ui-views";
import "@elastic/react-search-ui-views/lib/styles/styles.css";

export default function App() {
  return (
    <div>
      <Layout
        header={<SearchBox value="test" />}
        bodyHeader={
          <div class="meta">
            <PagingInfo
              end={10}
              searchTerm={"test"}
              start={1}
              totalResults={100}
            />
          </div>
        }
        bodyContent={
          <div>
            <Result title="A Result" />
          </div>
        }
      />
    </div>
  );
}

Storybook

A visual component reference is available locally. It is built with Storybook, and can be run locally with the following command:

npm run storybook