searchkit-redux

searchkit-redux copied to clipboard

SearchKit-Redux

This is a forked [email protected] with Redux and Immutable.js This version has some Redux capabilities and allows anyone to import a "SearchKitReducer" and in return add to your store's state tree the following structure:

{
  "viewSwitcher": {
    "currentView": "table",
  },
  "items": {
    "displayed": [{}, {}, {}],
    "query": {},
  }
}

Adding the SearchKitReducer to your store

import { combineReducers } from 'redux-immutable'
import * as SearchKit from 'searchkit' // eslint-disable-line

const YourReducer = combineReducers({
  filter: SearchKit.SearchKitReducer,
  more: () => {},
})

export default YourReducer

Using the ViewSwitcher with Redux mappings

Just import ViewSwitcherToggleContainer instead of ViewSwitcherToggle

import { ViewSwitcherToggleContainer } from 'searchkit'

Breaking Changes

'highlightFields' has changed to be 'highlightOptions' The structure of the prop has also changed and from now on instead of passing an Array of Strings:

<Hits            
  highlightOptions={['title', 'body']}
>

you will have to pass an Array of Objects, exactly like elasticsearch likes it.

<Hits            
  highlightOptions={{
    fields: {
      'title': {
        number_of_fragments: 0,
      },
      'result.domain': {
        number_of_fragments: 0,
      },
    },
  }}
>

This will allow you to pass highlighting options per field.

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.

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