Skip to content

yakworks/svelte-fuzzy

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

svelte-fuzzy

NPM

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

About

Fuse.js binding for fuzzy text match highlighting

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Svelte 60.3%
  • JavaScript 39.7%