svelte-fuzzy

Fuse.js binding for fuzzy text match highlighting.

Installation

Yarn

yarn add -D svelte-fuzzy

NPM

npm i -D svelte-fuzzy

Usage

<script>
  import Fuzzy from "svelte-fuzzy";

  let query = "old";

  // Fuse.js options
  let options = { keys: ["title"] };

  // Fuse.js data
  let data = [
    {
      title: "Frankenstein; Or, The Modern Prometheus",
      author: "Mary Wollstonecraft Shelley",
    },
    {
      title: "A Christmas Carol in Prose; Being a Ghost Story of Christmas",
      author: "Charles Dickens",
    },
    { title: "Pride and Prejudice", author: "Jane Austen" },
    { title: "The Scarlet Letter", author: "Nathaniel Hawthorne" },
    { title: "Alice's Adventures in Wonderland", author: "Lewis Carroll" },
  ];

  let formatted = [];
</script>

<input bind:value={query} />

<br />

<button on:click={() => (query = "carol")}>Search "carol"</button>
<button on:click={() => (query = "")}>Clear</button>

<Fuzzy {query} {data} {options} bind:formatted />

{#each formatted as item}
  {#each item as line}
    <li>
      {#each line as { matches, text }}
        {#if matches}
          <mark>{text}</mark>
        {:else}
          {text}
        {/if}
      {/each}
    </li>
  {/each}
{/each}

Highlighter

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

<script>
  import { Highlighter } from "svelte-fuzzy";
</script>

{#each formatted as item}
  {#each item as line}
    <li>
      <Highlighter {line} />
    </li>
  {/each}
{/each}

API

Props

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