zim-fuzzysearch/lib/components/FuzzyGui/index.js

Client side fuzzy search combined with seperate configurable result highlighting.

import React from "react";
import Input from "./Input";
import Result from "./Result";
import { useFuzzyInput } from "../hooks/useFuzzyInput";
var FuzzyGui = function (_a) {
    var markOptions = _a.markOptions;
    var inputCtx = useFuzzyInput();
    var searchedVal = React.useRef(null);
    var handleClickSearch = function (val) {
        inputCtx.handleInput(val);
        if (inputCtx.clickMode) {
            searchedVal.current = val;
            inputCtx.doSearch(val);
        }
    };
    return (React.createElement("div", { className: "zim-fuzzy--main" },
        React.createElement(Input, { value: inputCtx.inputVal, onChange: inputCtx.handleInput, onSearchClick: inputCtx.clickMode ? handleClickSearch : undefined, loading: inputCtx.data ? false : true, placeHolder: inputCtx.placeHolder }),
        React.createElement(Result, { markOptions: markOptions, searchedVal: searchedVal.current })));
};
export default FuzzyGui;