JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 449
  • Score
    100M100P100Q99742F

Package Exports

  • svelte-algolia-instantsearch
  • svelte-algolia-instantsearch/Hits.svelte
  • svelte-algolia-instantsearch/HitsPerPage.svelte
  • svelte-algolia-instantsearch/InstantSearch.svelte
  • svelte-algolia-instantsearch/Pagination.svelte
  • svelte-algolia-instantsearch/SearchBox.svelte
  • svelte-algolia-instantsearch/connect
  • svelte-algolia-instantsearch/package.json

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.

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 { onMount } from "svelte";
  import algoliasearch, { type SearchClient } from "algoliasearch/lite";

  let searchClient: SearchClient;

  onMount(() => {
    searchClient = algoliasearch(
      "<YOUR_API_KEY>",
      "<YOUR_SEARCH_KEY>"
    );
  });
</script>

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

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

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