cialfo / searchkit

React UI components / widgets. The easiest way to build a great search experience with Elasticsearch.

Home Page:http://www.searchkit.co

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

What is Searchkit?

Searchkit is a suite of UI components built in react. The aim is rapidly create beautiful search applications using declarative components, and without being an ElasticSearch expert.

npm version Join the chat at https://gitter.im/searchkit/searchkit Coverage Status

See full Documentation or Getting Started

Quick Intro

Live demo

const searchkit = new SearchkitManager("http://demo.searchkit.co/api/movies/")

const App = ()=> (
  <SearchkitProvider searchkit={searchkit}>
    <div>
      <div className="example-search-site__query">
        <SearchBox
         autofocus={true}
         searchOnChange={true}
         prefixQueryFields={["actors^1","type^2","languages","title^10"]}/>
      </div>
      <div className="example-search-site__applied-filters">
        <SelectedFilters/>
        <ResetFilters/>
        <HitsStats/>
      </div>
      <div className="example-search-site__filters">
        <HierarchicalMenuFilter
          fields={["type.raw", "genres.raw"]}
          title="Categories"
          id="categories"/>
        <RefinementListFilter
          id="actors"
          title="Actors"
          field="actors.raw"
          operator="AND"
          size={10}/>
      </div>
      <div className="example-search-site__results">
        <Hits hitsPerPage={10} sourceFilter={["title", "poster", "imdbId"]}/>
        <NoHits/>
      </div>
    </div>
  </SearchkitProvider>
)

ReactDOM.render(<App/>, document.getElementById('root'))

About

React UI components / widgets. The easiest way to build a great search experience with Elasticsearch.

http://www.searchkit.co

License:Apache License 2.0


Languages

Language:TypeScript 90.0%Language:CSS 7.5%Language:JavaScript 2.2%Language:Shell 0.2%Language:HTML 0.1%