svelte-algolia - npm Package Compare versions

Comparing version 0.2.3 to 0.2.4

package.json

		@@ -11,3 +11,3 @@ {
		"license": "MIT",
		"version": "0.2.3",
		"version": "0.2.4",
		"type": "module",
		@@ -14,0 +14,0 @@ "svelte": "src/Search.svelte",

readme.md

		@@ -17,7 +17,5 @@ <p align="center">

		## Usage

		There are three steps to setting up `svelte-algolia`. First, get it from NPM, then setup your server-side index updates and finally integrate the client-side search component into your UI.

		### Installation
		## Installation

		@@ -36,3 +34,3 @@ Install with `yarn`

		### Server Side
		## Server Side

		@@ -76,3 +74,3 @@ 1. Create an `algoliaConfig` object:

		#### Config Options
		### Config Options

		@@ -96,3 +94,3 @@ ```js

		#### Auto-update Indices during Builds
		### Auto-update Indices during Builds

		@@ -113,3 +111,3 @@ To use this package as part of a build process (e.g. in a [SvelteKit](https://kit.svelte.dev) app), simply call `indexAlgolia` in your build config:

		### Client Side
		## Client Side

		@@ -173,4 +171,39 @@ `<Search />` needs your Algolia app's ID and search key to access its search indices as well as a mapping from index to corresponding Svelte-component that should render hits (items matching searches in that index). Each hit component receives a `hit` object as prop with all attributes stored in the Algolia index.

		#### Styling
		### Props

		Full list of props/bindable variables for this component:

		\| name \| default \| description \|
		\| :-------------- \| :---------------------------------------------------------------------------- \| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- \|
		\| `appId` \| `String!` \| [Algolia app ID](https://algolia.com/doc/tools/crawler/apis/configuration/app-id) \|
		\| `searchKey` \| `String!` \| [Search-only API key](https://algolia.com/doc/guides/security/api-keys/#search-only-api-key) \|
		\| `indices` \| `{indexName: Component}` \| Object mapping the name of each index the `Search` component should tap into for finding Search results to the Svelte component that should render those hits. \|
		\| `loadingStr` \| `'Searching...'` \| String to display in the results pane while Search results are being fetched. \|
		\| `noResultMsg` \| ``(query) => `No results for '${query}'` `` \| Function that returns the string to display when search returned no results. \|
		\| `resultCounter` \| ```(hits) => hits.length > 0 ? `<span>Results: ${hits.length}<span>` : `` ``` \| Function that returns a string which wll be displayed next to the name of each index to show how many results were found in that index. Return empty string to show nothing. \|
		\| `placeholder` \| `'Search'` \| Placeholder shown in the text input before user starts typing. \|
		\| `ariaLabel` \| `'Search'` \| Tells assistive technology how to announce the input element to the user. \|
		\| `hasFocus` \| `false` \| Bindable boolean indicating whether the text input or results pane currently has focus. \|

		### Events

		`Search.svelte` listens for `on:close` events on every hit component it renders and will set `hasFocus` to `false` to close itself when received. You can use this e.g. to close the search interface when the user clicks on a link in one of the search results and navigates to a different page on your site:

		```svelte
		<script>
		import { createEventDispatcher } from 'svelte'

		export let hit

		const dispatch = createEventDispatcher()
		</script>

		<h3>
		<a href={hit.slug} on:click={() => dispatch(`close`)}>{@html hit.title}</a>
		</h3>
		<p>{@html hit.body}</p>
		```

		### Styling

		`Search.svelte` offers the following CSS variables that can be [passed in directly as props](https://github.com/sveltejs/rfcs/pull/13):
		@@ -177,0 +210,0 @@

src/Search.svelte

Sorry, the diff of this file is not supported yet

svelte-algolia - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics