Package Exports

svelte-algolia-instantsearch
svelte-algolia-instantsearch/InstantSearch.svelte
svelte-algolia-instantsearch/components
svelte-algolia-instantsearch/components/Hits.svelte
svelte-algolia-instantsearch/components/HitsPerPage.svelte
svelte-algolia-instantsearch/components/Pagination.svelte
svelte-algolia-instantsearch/components/PoweredBy.svelte
svelte-algolia-instantsearch/components/RefinementList.svelte
svelte-algolia-instantsearch/components/SearchBox.svelte
svelte-algolia-instantsearch/connect
svelte-algolia-instantsearch/package.json
svelte-algolia-instantsearch/searchContext

Readme

svelte-algolia-instantsearch

This is a Svelte component library for Algolia's InstantSearch.js.

Connectors were used as a mean to map provided state to our Svelte components.

Widgets markup were inspired by react-instantsearch-hooks-web, as well as some helpers were taken from react-instantsearch-hooks

Installation

yarn add svelte-algolia-instantsearch algoliasearch
# or
npm install svelte-algolia-instantsearch algoliasearch

Basic usage

<script lang="ts">
  import {
    InstantSearch,
    SearchBox,
    Hits,
    Pagination,
    HitsPerPage,
  } from "svelte-algolia-instantsearch";
  import algoliasearch, { type SearchClient } from "algoliasearch/lite";

  const searchClient = algoliasearch("<YOUR_API_KEY>", "<YOUR_SEARCH_KEY>");
</script>

<InstantSearch indexName="test" {searchClient}>
  <SearchBox />

  <Hits let:hit>
    <img src="{hit.author_image_url}" alt="{hit.author_name}" />
    {hit.post_title} by {hit.author_name}
  </Hits>

  <div style="display:flex;">
    <Pagination />
    <HitsPerPage
      defaultRefinement={5}
      items={[
        { value: 5, label: "Show 5 hits" },
        { value: 10, label: "Show 10 hits" },
      ]}
    />
  </div>
</InstantSearch>