Neurotic Pantaloon Maker

    searchkit-redux
    TypeScript icon, indicating that this package has built-in type declarations

    0.11.0 • Public • Published

    SearchKit-Redux

    This is a forked Searckit@v0.10.0 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: 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.

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

    Install

    npm i searchkit-redux

    DownloadsWeekly Downloads

    29

    Version

    0.11.0

    License

    Apache-2.0

    Last publish

    Collaborators

    • udisun