Skip to content

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

License

Notifications You must be signed in to change notification settings

ncheaz/searchkit

 
 

Repository files navigation

Beta Release 1.0.0-7

We're working towards releasing 1.0 and currently releasing betas to reach that goal. Notable changes include React 15 compatibility (completed), Typescript 2.2 updates (completed), Elasticsearch 5 support (in progress).

Please help us test 1.0.0 by using the beta releases. 1.0.0-7 is the latest release.

What is Searchkit?

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.

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}>
    <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'))

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 92.2%
  • CSS 5.8%
  • JavaScript 1.6%
  • Other 0.4%