Skip to content

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

License

Notifications You must be signed in to change notification settings

murukesh/searchkit

 
 

Repository files navigation

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.

See full Documentation or Getting Started

Quick Intro

Live demo

const host = "https://kili-eu-west-1.searchly.com/movies/"
const sk = new SearchkitManager(host, {
  multipleSearchers:false,
  basicAuth:"read:teetndhjnrspbzxxyfxmf5fb24suqxuj"
})

class App extends React.Component {

  <SearchkitProvider searchkit={sk}>
    <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}/>
      </div>
    </div>
  </SearchkitProvider>
}

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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 51.5%
  • JavaScript 42.3%
  • CSS 6.2%