🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Searchkit is a collection of React UI components / widgets that make it easier to build a great search experience with Elasticsearch.

Featured Others React

Documentation

What is Searchkit?

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

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

Quick Start

Checkout Searchkit starter app (https://github.com/searchkit/searchkit-starter-app). Based off Facebook's Create-react-app project. Clone repo and add your changes!

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}>     <Layout>       <TopBar>         <SearchBox           autofocus={true}           searchOnChange={true}           prefixQueryFields={["actors^1","type^2","languages","title^10"]}/>       </TopBar>       <LayoutBody>         <SideBar>           <HierarchicalMenuFilter             fields={["type.raw", "genres.raw"]}             title="Categories"             id="categories"/>           <RefinementListFilter             id="actors"             title="Actors"             field="actors.raw"             operator="AND"             size={10}/>         </SideBar>         <LayoutResults>           <ActionBar>              <ActionBarRow>               <HitsStats/>             </ActionBarRow>              <ActionBarRow>               <SelectedFilters/>               <ResetFilters/>             </ActionBarRow>            </ActionBar>           <Hits mod="sk-hits-grid" hitsPerPage={10} itemComponent={MovieHitsGridItem}             sourceFilter={["title", "poster", "imdbId"]}/>           <NoHits/>         </LayoutResults>       </LayoutBody>     </Layout>   </SearchkitProvider> )  ReactDOM.render(<App/>, document.getElementById('root'))  

You May Also Like