Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/metonym/svelte-fuzzy
- Owner: metonym
- License: mit
- Created: 2019-10-26T21:35:36.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-05-07T03:10:57.000Z (over 1 year ago)
- Last Synced: 2024-10-14T08:43:41.764Z (3 months ago)
- Topics: fuse-js, fuzzy, fuzzy-search, highlight, highlight-words, match, svelte, text-highlighter
- Language: Svelte
- Homepage: https://metonym.github.io/svelte-fuzzy
- Size: 912 KB
- Stars: 30
- Watchers: 3
- Forks: 2
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
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