Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/metonym/svelte-fuzzy

Fuse.js binding for fuzzy text match highlighting
https://github.com/metonym/svelte-fuzzy

fuse-js fuzzy fuzzy-search highlight highlight-words match svelte text-highlighter

Last synced: 2 months ago
JSON representation

Fuse.js binding for fuzzy text match highlighting

Awesome Lists containing this project

README

        

# svelte-fuzzy

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

> [Fuse.js](https://github.com/krisk/Fuse) binding for fuzzy text match highlighting.

---

## Installation

**Yarn**

```bash
yarn add -D svelte-fuzzy
```

**NPM**

```bash
npm i -D svelte-fuzzy
```

## Usage

```svelte

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 = [];


(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}
    ```

    ### `Highlighter`

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

    ```svelte

    import { Highlighter } from "svelte-fuzzy";

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




  • {/each}
    {/each}
    ```

    ## API

    ### Props

    #### `Fuzzy`

    | Prop name | Value |
    | :-------- | :--------------------------------------------------------------------------------------------------------------------- |
    | query | `string` (default: `""`) |
    | data | [FuzzyData](https://github.com/metonym/svelte-fuzzy/blob/master/types/Fuzzy.svelte.d.ts#L19) (default: `[]`) |
    | options | [FuzzyOptions](https://github.com/metonym/svelte-fuzzy/blob/master/types/Fuzzy.svelte.d.ts#L25) |
    | result | [FuzzyResult](https://github.com/metonym/svelte-fuzzy/blob/master/types/Fuzzy.svelte.d.ts#L31) (default: `[]`) |
    | formatted | [FuzzyFormattedResult](https://github.com/metonym/svelte-fuzzy/blob/master/types/Fuzzy.svelte.d.ts#L4) (default: `[]`) |

    #### `Highlighter`

    | Prop name | Value |
    | :-------- | :---------------------------------------------------------------------------------------------------------------------- |
    | line | [HighlighterLine](https://github.com/metonym/svelte-fuzzy/blob/master/types/Highlighter.svelte.d.ts#L4) (default: `[]`) |

    ## TypeScript

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

    TypeScript definitions are located in the [types folder](./types).

    ## Changelog

    [Changelog](CHANGELOG.md)

    ## License

    [MIT](LICENSE)

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