@haroonwaves/blog-kit-react 1.2.9 → 1.3.0

package/dist/index.cjs

@@ -306,19 +306,37 @@ function BlogPlaceholder({ count = 3, className = "" }) {
 }
 
 // src/hooks/useBlogs.ts
+var import_react4 = require("react");
+
+// src/hooks/useDebounce.ts
 var import_react3 = require("react");
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = (0, import_react3.useState)(value);
+  (0, import_react3.useEffect)(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+// src/hooks/useBlogs.ts
 function useBlogs(blogsMeta) {
-  const [filteredBlogs, setFilteredBlogs] = (0, import_react3.useState)(blogsMeta);
-  const [searchTerm, setSearchTerm] = (0, import_react3.useState)("");
-  const [selectedCategory, setSelectedCategory] = (0, import_react3.useState)(null);
+  const [filteredBlogs, setFilteredBlogs] = (0, import_react4.useState)(blogsMeta);
+  const [searchTerm, setSearchTerm] = (0, import_react4.useState)("");
+  const [selectedCategory, setSelectedCategory] = (0, import_react4.useState)(null);
+  const debouncedSearchTerm = useDebounce(searchTerm, 500);
   const getBlogCategories = (blog) => {
     return blog.categories ?? [];
   };
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     let filtered = blogsMeta;
-    if (searchTerm) {
+    if (debouncedSearchTerm) {
       filtered = filtered.filter(
-        (blog) => blog.title.toLowerCase().includes(searchTerm.toLowerCase()) || blog.description.toLowerCase().includes(searchTerm.toLowerCase())
+        (blog) => blog.title.toLowerCase().includes(debouncedSearchTerm.toLowerCase()) || blog.description.toLowerCase().includes(debouncedSearchTerm.toLowerCase())
       );
     }
     if (selectedCategory) {
@@ -328,7 +346,7 @@ function useBlogs(blogsMeta) {
       });
     }
     setFilteredBlogs(filtered);
-  }, [blogsMeta, searchTerm, selectedCategory]);
+  }, [blogsMeta, debouncedSearchTerm, selectedCategory]);
   const categories = Array.from(new Set(blogsMeta.flatMap((blog) => getBlogCategories(blog))));
   return {
     metadata: filteredBlogs,

package/dist/index.js

@@ -266,19 +266,37 @@ function BlogPlaceholder({ count = 3, className = "" }) {
 }
 
 // src/hooks/useBlogs.ts
-import { useState, useEffect } from "react";
+import { useState as useState2, useEffect as useEffect2 } from "react";
+
+// src/hooks/useDebounce.ts
+import { useEffect, useState } from "react";
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+// src/hooks/useBlogs.ts
 function useBlogs(blogsMeta) {
-  const [filteredBlogs, setFilteredBlogs] = useState(blogsMeta);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [selectedCategory, setSelectedCategory] = useState(null);
+  const [filteredBlogs, setFilteredBlogs] = useState2(blogsMeta);
+  const [searchTerm, setSearchTerm] = useState2("");
+  const [selectedCategory, setSelectedCategory] = useState2(null);
+  const debouncedSearchTerm = useDebounce(searchTerm, 500);
   const getBlogCategories = (blog) => {
     return blog.categories ?? [];
   };
-  useEffect(() => {
+  useEffect2(() => {
     let filtered = blogsMeta;
-    if (searchTerm) {
+    if (debouncedSearchTerm) {
       filtered = filtered.filter(
-        (blog) => blog.title.toLowerCase().includes(searchTerm.toLowerCase()) || blog.description.toLowerCase().includes(searchTerm.toLowerCase())
+        (blog) => blog.title.toLowerCase().includes(debouncedSearchTerm.toLowerCase()) || blog.description.toLowerCase().includes(debouncedSearchTerm.toLowerCase())
       );
     }
     if (selectedCategory) {
@@ -288,7 +306,7 @@ function useBlogs(blogsMeta) {
       });
     }
     setFilteredBlogs(filtered);
-  }, [blogsMeta, searchTerm, selectedCategory]);
+  }, [blogsMeta, debouncedSearchTerm, selectedCategory]);
   const categories = Array.from(new Set(blogsMeta.flatMap((blog) => getBlogCategories(blog))));
   return {
     metadata: filteredBlogs,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haroonwaves/blog-kit-react",
-  "version": "1.2.9",
+  "version": "1.3.0",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",