Searchkit Elastic UI

Setup

Require to setup the provider, define a GQL query for components and use the searchkitQuery hook to perform the search. See Quick start UI Setup for more information.

import { useSearchkitQuery, SearchkitProvider, SearchkitClient } from '@searchkit/client'
import { gql } from '@apollo/client'
const query = gql`
query resultSet($query: String, $filters: [FiltersSet], $page: PageInput) {
results(query: $query, filters: $filters) {
summary {
total
appliedFilters {
id
label
value
}
query
}
hits(page: $page) {
page {
total
totalPages
pageNumber
from
size
}
items {
id
fields {
}
}
}
facets {
id
type
label
display
entries {
id
label
count
}
}
}
}
`
const client = SearchkitClient()
export default () => {
const { data, loading } = useSearchkitQuery(query)
return (
<div>
<SearchkitProvider client={client}>
<SearchBar loading={loading} />
<Hits data={data} />
</SearchkitProvider>
</div>
)
}

Components

SearchBar

searchbar.mov

Usage

import {
SearchBar
} from '@searchkit/elastic-ui'
<SearchBar loading={loading} />

Options

OptionDescription
loadingBoolean

SelectedFilters

SelectedFilters.mov

Usage

import {
SelectedFilters
} from '@searchkit/elastic-ui'
<SelectedFilters data={data?.results} loading={loading} />

Options

OptionDescription
loadingBoolean. Loading value from GQL query
dataResponse from GQL query

ResetSearchButton

ResetSearchButton.mov

Usage

import {
ResetSearchButton
} from '@searchkit/elastic-ui'
<ResetSearchButton loading={loading} />

Options

OptionDescription
loadingBoolean. Loading value from GQL query

Pagination

Pagination.mov

Usage

import {
Pagination
} from '@searchkit/elastic-ui'
<Pagination data={data?.results} />

Options

OptionDescription
dataBoolean. Loading value from GQL query

Facets

FacetsList

Searchkit API returns a list of facets, in the configuration order. Each facet is configured with a display field and this field is tied with a component.

ListFacet component will use the facet response and for each facet, will display the correct facet component to the user.

FacetsList is a function which returns a React component that accepts the data / loading props.You will be able to pass custom facet components within the optional argument. FacetsList Searchkit will render all Searchkit Facet Components.

Usage

import {
FacetsList
} from '@searchkit/elastic-ui'
export default () => {
const Facets = FacetsList([CustomFacet])
return (
<div>
<Facets data={data?.results} loading={loading} />
</div>
)
}

ListFacet

ListFacet.mov

RangeSliderFacet

RangeSliderFacet.mov

ComboBoxFacet

ComboBoxFacet.mov

DateRangeFacet

DateRangeFilter.mov