Fuzzy in React

Zusammenfassung

Du kannst diese Bibliothek in React genauso wie in einem normalen JavaScript-Projekt verwenden – wir stellen jedoch zusätzliche Hilfsmittel zur Verfügung, um die Integration zu erleichtern.

Die wichtigsten Unterschiede sind:

Interne Verwendung von useMemo und useCallback zur Optimierung
Eine intuitivere API, speziell für React entwickelt

Die Hauptkonzepte sind useFuzzy und Highlight.

Es ist eine Konvention, die Kernbibliothek von der React-spezifischen Version zu trennen. So kannst du den Kern auch in anderen Frameworks oder in reinem JavaScript nutzen. Der Import ist kleiner und der Code sauberer.

API

`useFuzzy`

Dies ist der Haupt-Hook, der eine performante Suche durch Elemente ermöglicht.

Er akzeptiert die gleichen Parameter wie die fuzzy Funktion, sowie einige zusätzliche Optionen:

list – Die Liste der zu durchsuchenden Elemente. Erforderlich.
query – Die Suchanfrage. Erforderlich.

Du brauchst jetzt nur einen Schritt – kein manuelles Aufrufen der fuzzy Funktion. useFuzzy erledigt das für dich intern.

Alle Optionen von `useFuzzy`

App.tsx

const filteredList = useFuzzy({
  list, // erforderlich
  query, // erforderlich
  key: "name", // optional, falls Objekte
  getKey: (item) => [item.name, item.description], // optional, mehrere Schlüssel oder Funktion
  mapResult: (item) => ( item ),  // Mapping-Funktion
  debug: true, // optional, Ausgabe in Konsole
  limit: 10, // optional, max. Anzahl Ergebnisse
  maxScore: 0.5, // optional, maximale Punktzahl
})

Highlight

Dies ist eine Hilfskomponente, die übereinstimmende Zeichen hervorhebt.

Du könntest sie selbst bauen – aber wir liefern sie aus Bequemlichkeit mit.

App.tsx

import { useFuzzy, Highlight } from '@polgubau/fuzzy/react'
 
const App = () => {
	const list = ["volvo", "seat", "mercedes", "audi", "bmw"];
	const query = "volv";
	const { results } = useFuzzy({ list, query });
 
	return (
		<ul>
			{results.map(({ item, matches }) => (
				<li key={item}>
					<Highlight text={item} ranges={matches[0]} />
				</li>
			))}
		</ul>
	);
};

`Highlight` Props

Prop	Type	Default
`text`	`string`	`""`
`ranges`	`HighlightRanges`	`null`
`style?`	`CSSProperties`	`{ backgroundColor: "rgba(245,220,0,.25)" }`
`className?`	`string`	`""`

Beispiele

Liste von statischen strings

App.tsx

import { useFuzzy, Highlight } from '@polgubau/fuzzy/react'
 
const App = () => {
	const list = ["volvo", "seat", "mercedes", "audi", "bmw"];
	const query = "volv";
	const { results } = useFuzzy({ list, query });
	return (
		<ul>
			{results.map(({ item, matches }) => (
				<li key={item}>
						<Highlight text={item} ranges={matches[0]} />
				</li>
			))}
		</ul>
	);
};

Suche von strings aus einem input

App.tsx

import { useFuzzy, Highlight } from '@polgubau/fuzzy/react'
import { useState } from 'react';
 
const App = () => {
	const [query, setQuery] = useState("");
	const list = ["volvo", "seat", "mercedes", "audi", "bmw"];
	const { results } = useFuzzy({ list, query });
 
	return (
		<div>
			<input type="text" value={query} onChange={(e) => setQuery(e.target.value)} />
			<ul>
				{results.map(({ item, matches }) => (
					<li key={item}>
						<Highlight text={item} ranges={matches[0]} />
					</li>
				))}
			</ul>
		</div>
	);
};

Suche von Objekten nach einem Schlüssel

App.tsx

import { useFuzzy, Highlight } from '@polgubau/fuzzy/react'
import { useState } from 'react';
 
const App = () => {
	const [query, setQuery] = useState("");
	const list = [
		{ name: "volvo", country: "sweden" },
		{ name: "seat", country: "spain" },
		{ name: "mercedes", country: "germany" },
		{ name: "ford", country: "usa" },
		{ name: "toyota", country: "japan" }
	];
 
	// Suche nach dem Namen
	const { results } = useFuzzy({ list, query, key: "name" });
 
	return (
		<div>
			<input type="text" value={query} onChange={(e) => setQuery(e.target.value)} />
			<ul>
				{results.map(({ item, matches }) => (
					<li key={item.name}>
						<Highlight text={item.name} ranges={matches[0]} />
					</li>
				))}
			</ul>
		</div>
	);
};

Suche von Objekten nach mehreren Schlüsseln

App.tsx

import { useFuzzy, Highlight } from '@polgubau/fuzzy/react'
import { useState } from 'react';
 
const App = () => {
	const [query, setQuery] = useState("");
	const list = [
		{ name: "volvo", country: "sweden" },
		{ name: "seat", country: "spain" },
		{ name: "mercedes", country: "germany" },
		{ name: "ford", country: "usa" },
		{ name: "toyota", country: "japan" }
	];
 
	// Suche nach Name und Land
	const { results } = useFuzzy({ list, query, getKey: (item) => [item.name, item.country] });
 
	return (
		<div>
			<input type="text" value={query} onChange={(e) => setQuery(e.target.value)} />
			<ul>
				{results.map(({ item, matches: [nameMatch, countryMatch] }) => (
					<li key={item.name}>
						<p>Name: <Highlight text={item.name} ranges={nameMatch} /></p>
						<p>Land: <Highlight text={item.country} ranges={countryMatch} /></p>
					</li>
				))}
			</ul>
		</div>
	);
};

Fuzzy in React

Zusammenfassung

Einfaches Beispiel

API

`useFuzzy`

Alle Optionen von `useFuzzy`

Highlight

`Highlight` Props

Beispiele

Liste von statischen strings

Suche von strings aus einem input

Suche von Objekten nach einem Schlüssel

Suche von Objekten nach mehreren Schlüsseln

On this page