Custom hook for the elastic Search With tire data structure

Overview

This npm package provides a custom React hook for implementing Elasticsearch-like search features using the Trie data structure. It is designed to efficiently retrieve data on a large dataset.

Homepage website for demo

https://elastic-search-sage.vercel.app/

Installation

To use this package in your React project, you can install it using npm:

npm install elastic_search

import { useElasticSearch } from "trie_elastic_search/src/index";

Usage / Example

Import the useTrieSearch hook in your React component and use it as follows:

import { useState } from "react";
import "./App.css";
import data from "./data/data.json";
import { useElasticSearch } from "trie_elastic_search/src/index";
function App() {
  const [search, setSearch] = useState("");
  const [suggestions, setSuggestions] = useState([]);

  const handleChange = (e) => {
    console.log("search", search);
    setSearch(e.target.value);
  };

  useElasticSearch(search, setSuggestions, data, 10);

  return (
    <div className="App">
      <div className="search-bar">
        <h1 className="header">Elastic Search</h1>
        <input
          value={search}
          className="search-input"
          name={"search"}
          onChange={(e) => {
            handleChange(e);
          }}
        />
        {suggestions.length > 0 && (
          <div className="search-suggestion">
            {suggestions.map((item, key) => {
              return <p key={key}>{item}</p>;
            })}
          </div>
        )}
      </div>
    </div>
  );
}

export default App;

API

useElasticSearch() A custom React hook that provides Trie-based search functionality.

useElasticSearch(searchKeyword,updateStateCallback,data,numberOfEnteries)

Parameters

searchKeyword (string): The searching keyword.

updateStateCallback (function): A callback function that updates the state with the search results.

data : Data on which we have to do the search query .

numberOfEntries (optional, number): The number of entries to retrieve (default is 10 if not passed).

Contributions

Always welcomed . create a pull request with proper desciption . Connect with developers for more understanding of the project Profile

Github

For more refences you can visit the github link Github Link