elastic
react-search-ui-views
Part of the Search UI project.
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 React from "react";
import {
Layout,
PagingInfo,
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 className="meta">
<PagingInfo
end={10}
searchTerm={"test"}
start={1}
totalResults={100}
/>
</div>
}
bodyContent={
<div>
<Result
title="A Result"
fields={{ description: "This is an example of 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