svelte-fuzzy

[![NPM][npm]][npm-url]

> Fuse.js binding for fuzzy text match highlighting.

---

Installation

Yarn

``bash
yarn add -D svelte-fuzzy
`

NPM

`bash
npm i -D svelte-fuzzy
`

Usage

`svelte





(query = "carol")}>Search "carol"
(query = "")}>Clear

{#each formatted as item}
{#each item as line}



{#each line as { matches, text }}
{#if matches}
{text}
{:else}
{text}
{/if}
{/each}



{/each}
{/each}
`

$3

You can use the Highlighter component for fuzzy text highlighting. Matching characters are wrapped in a mark element.

`svelte


{#each formatted as item}
{#each item as line}







{/each}
{/each}
`

API

$3

#### Fuzzy

| Prop name | Value |
| :-------- | :--------------------------------------------------------------------------------------------------------------------- |
| query | string (default: "") |
| data | FuzzyData (default: []) |
| options | FuzzyOptions |
| result | FuzzyResult (default: []) |
| formatted | FuzzyFormattedResult (default: []) |

#### Highlighter

| Prop name | Value |
| :-------- | :---------------------------------------------------------------------------------------------------------------------- |
| line | HighlighterLine (default: []`) |

TypeScript

Svelte version 3.31 or greater is required to use this component with TypeScript.

TypeScript definitions are located in the types folder.

Changelog

Changelog

License

MIT

[npm]: https://img.shields.io/npm/v/svelte-fuzzy.svg?style=for-the-badge&color=%23ff3e00
[npm-url]: https://npmjs.com/package/svelte-fuzzy