@perch33/react-usefilter-hook 1.0.2 → 1.0.4

package/README.md

@@ -7,6 +7,7 @@ Ideal for search bars, dynamic lists, admin dashboards, e-commerce filters, etc.
 ![downloads](https://img.shields.io/npm/dm/@perch33/react-usefilter-hook)
 ![license](https://img.shields.io/npm/l/@perch33/react-usefilter-hook)
 ![types](https://img.shields.io/badge/types-TypeScript-blue)
+![Next.js](https://img.shields.io/badge/Next.js-App%20Router%20Ready-black)
 
 ---
 
@@ -16,6 +17,7 @@ Ideal for search bars, dynamic lists, admin dashboards, e-commerce filters, etc.
 - ✂️ Removes punctuation and special characters
 - 🔎 Case-insensitive search
 - ⚛️ Fully typed with TypeScript
+- 🚀 **Next.js App Router Compatible** (`"use client"` included)
 - 🔁 Auto-updates when `data` changes
 - 🔧 Accepts custom error component
 - 🧩 Framework-agnostic, works in any React project
@@ -32,7 +34,6 @@ or
 
 ```sh
 yarn add @perch33/react-usefilter-hook
-
 ```
 
 ## 🚀 Usage Example (Basic)
@@ -121,31 +122,37 @@ useFilter<T>(data, key, errorComponent);
 ### ⚙️ How filtering works
 
 - This hook automatically:
-
 - Converts text to lowercase
-
 - Removes accents (áéíóú → aeiou)
-
 - Removes punctuation and special characters
-
 - Performs a normalized comparison
-
 - Filters in real time as the user types
 
+---
+
+## 🔍 Used in Production (Real Examples)
+
+This hook is currently used in my personal website:
+
+- 🎼 **Music Scores / Partituras**  
+  Live search using `useFilter` to filter music scores dynamically.  
+  👉 https://www.percychuzon.com/partituras
+
+- ✍️ **Blog**  
+  Used to filter blog posts instantly with accent-insensitive matching.  
+  👉 https://www.percychuzon.com/blog
+
+These sections demonstrate real-world usage of the hook with dynamic content,  
+search inputs, and accent-normalized filtering.
+
 ### 💡 When to use this hook?
 
 - Product search inputs
-
 - Admin panel filters
-
 - Searchable dropdowns
-
 - User lists
-
 - Blog post search
-
 - Table filtering
-
 - Autocomplete components
 
 ## 📁 Project Structure
@@ -153,7 +160,6 @@ useFilter<T>(data, key, errorComponent);
 Your installation will contain:
 
 ```
-
 dist/
   ├─ cjs/
   ├─ esm/
@@ -166,4 +172,4 @@ README.md
 
 **Percy Chuzon**
 📧 [contacto@percychuzon.com](mailto:contacto@percychuzon.com)
-🌐 [https://wwww.percychuzon.com](https://www.percychuzon.com)
+🌐 [https://www.percychuzon.com](https://www.percychuzon.com)

package/dist/cjs/index.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFilter = void 0;
 const react_1 = require("react");
@@ -20,27 +21,26 @@ function normalizarTexto(texto) {
 }
 const useFilter = (data, key, errorComponent) => {
     const [filterText, setFilterText] = (0, react_1.useState)("");
-    const [filteredData, setFilteredData] = (0, react_1.useState)(data);
-    const [error, setError] = (0, react_1.useState)(null);
     /** Maneja el texto que escribe el usuario en el input */
     const handleFilterChange = (e) => {
-        const searchText = normalizarTexto(e.target.value);
-        setFilterText(searchText);
+        setFilterText(e.target.value);
     };
-    /** Filtra la lista cada vez que cambia el texto o los datos */
-    (0, react_1.useEffect)(() => {
-        const filteredItems = data.filter((item) => {
+    /** Filtra la lista de forma eficiente usando useMemo */
+    const { filteredData, error } = (0, react_1.useMemo)(() => {
+        // Si no hay texto, devolvemos todo sin error
+        if (!filterText) {
+            return { filteredData: data, error: null };
+        }
+        const searchText = normalizarTexto(filterText);
+        const filtered = data.filter((item) => {
             const valorCampo = String(item[key]);
-            return normalizarTexto(valorCampo).includes(filterText);
+            return normalizarTexto(valorCampo).includes(searchText);
         });
-        setFilteredData(filteredItems);
-        if (filteredItems.length === 0 && filterText !== "") {
-            setError(errorComponent);
-        }
-        else {
-            setError(null);
-        }
-    }, [data, filterText, key]);
+        return {
+            filteredData: filtered,
+            error: filtered.length === 0 ? errorComponent : null
+        };
+    }, [data, filterText, key, errorComponent]);
     return {
         filterText,
         filteredData,

package/dist/cjs/index.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useFilter=void 0;const react_1=require("react");function normalizarTexto(e){return e.normalize("NFD").replace(/[\u0300-\u036f]/g,"").replace(/[.,/#!$%^&*;:{}=\-_`~()¿?¡!]/g,"").toLowerCase().trim()}const useFilter=(e,t,r)=>{const[a,l]=(0,react_1.useState)(""),[o,n]=(0,react_1.useState)(e),[s,u]=(0,react_1.useState)(null);return(0,react_1.useEffect)(()=>{const l=e.filter(e=>normalizarTexto(String(e[t])).includes(a));n(l),0===l.length&&""!==a?u(r):u(null)},[e,a,t]),{filterText:a,filteredData:o,error:s,handleFilterChange:e=>{const t=normalizarTexto(e.target.value);l(t)}}};exports.useFilter=useFilter;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useFilter=void 0;const react_1=require("react");function normalizarTexto(e){return e.normalize("NFD").replace(/[\u0300-\u036f]/g,"").replace(/[.,/#!$%^&*;:{}=\-_`~()¿?¡!]/g,"").toLowerCase().trim()}const useFilter=(e,r,t)=>{const[a,l]=(0,react_1.useState)(""),{filteredData:o,error:i}=(0,react_1.useMemo)(()=>{if(!a)return{filteredData:e,error:null};const l=normalizarTexto(a),o=e.filter(e=>normalizarTexto(String(e[r])).includes(l));return{filteredData:o,error:0===o.length?t:null}},[e,a,r,t]);return{filterText:a,filteredData:o,error:i,handleFilterChange:e=>{l(e.target.value)}}};exports.useFilter=useFilter;

package/dist/esm/index.js

@@ -1,4 +1,5 @@
-import { useState, useEffect } from "react";
+"use client";
+import { useState, useMemo } from "react";
 /**
  * 🔠 Normaliza texto para facilitar búsquedas:
  * - Convierte a minúsculas
@@ -17,27 +18,26 @@ function normalizarTexto(texto) {
 }
 export const useFilter = (data, key, errorComponent) => {
     const [filterText, setFilterText] = useState("");
-    const [filteredData, setFilteredData] = useState(data);
-    const [error, setError] = useState(null);
     /** Maneja el texto que escribe el usuario en el input */
     const handleFilterChange = (e) => {
-        const searchText = normalizarTexto(e.target.value);
-        setFilterText(searchText);
+        setFilterText(e.target.value);
     };
-    /** Filtra la lista cada vez que cambia el texto o los datos */
-    useEffect(() => {
-        const filteredItems = data.filter((item) => {
+    /** Filtra la lista de forma eficiente usando useMemo */
+    const { filteredData, error } = useMemo(() => {
+        // Si no hay texto, devolvemos todo sin error
+        if (!filterText) {
+            return { filteredData: data, error: null };
+        }
+        const searchText = normalizarTexto(filterText);
+        const filtered = data.filter((item) => {
             const valorCampo = String(item[key]);
-            return normalizarTexto(valorCampo).includes(filterText);
+            return normalizarTexto(valorCampo).includes(searchText);
         });
-        setFilteredData(filteredItems);
-        if (filteredItems.length === 0 && filterText !== "") {
-            setError(errorComponent);
-        }
-        else {
-            setError(null);
-        }
-    }, [data, filterText, key]);
+        return {
+            filteredData: filtered,
+            error: filtered.length === 0 ? errorComponent : null
+        };
+    }, [data, filterText, key, errorComponent]);
     return {
         filterText,
         filteredData,

package/dist/esm/index.min.js

@@ -1 +1 @@
-import{useState,useEffect}from"react";function normalizarTexto(e){return e.normalize("NFD").replace(/[\u0300-\u036f]/g,"").replace(/[.,/#!$%^&*;:{}=\-_`~()¿?¡!]/g,"").toLowerCase().trim()}export const useFilter=(e,t,r)=>{const[a,l]=useState(""),[n,o]=useState(e),[u,i]=useState(null);return useEffect(()=>{const l=e.filter(e=>normalizarTexto(String(e[t])).includes(a));o(l),0===l.length&&""!==a?i(r):i(null)},[e,a,t]),{filterText:a,filteredData:n,error:u,handleFilterChange:e=>{const t=normalizarTexto(e.target.value);l(t)}}};
+import{useState,useMemo}from"react";function normalizarTexto(e){return e.normalize("NFD").replace(/[\u0300-\u036f]/g,"").replace(/[.,/#!$%^&*;:{}=\-_`~()¿?¡!]/g,"").toLowerCase().trim()}export const useFilter=(e,r,t)=>{const[a,l]=useState(""),{filteredData:o,error:n}=useMemo(()=>{if(!a)return{filteredData:e,error:null};const l=normalizarTexto(a),o=e.filter(e=>normalizarTexto(String(e[r])).includes(l));return{filteredData:o,error:0===o.length?t:null}},[e,a,r,t]);return{filterText:a,filteredData:o,error:n,handleFilterChange:e=>{l(e.target.value)}}};

package/dist/types/index.d.ts

@@ -6,7 +6,7 @@ import type { ChangeEvent } from "react";
  *
  * ✔ Permite filtrar un array (data) según un campo específico (key)
  * ✔ Devuelve:
- *    - filterText → texto escrito por el usuario
+ *    - filterText → texto escrito por el usuario (raw)
  *    - filteredData → lista filtrada
  *    - error → componente mostrado cuando no hay resultados
  *    - handleFilterChange → manejador para input de búsqueda

package/package.json

@@ -1,62 +1,66 @@
-{
-  "name": "@perch33/react-usefilter-hook",
-  "version": "1.0.2",
-  "description": "A lightweight and reusable React hook for filtering lists with accent normalization, punctuation removal and TypeScript support.",
-  "main": "dist/cjs/index.min.js",
-  "module": "dist/esm/index.min.js",
-  "types": "dist/types/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/esm/index.min.js",
-      "require": "./dist/cjs/index.min.js",
-      "types": "./dist/types/index.d.ts"
-    }
-  },
-  "files": [
-    "dist/cjs",
-    "dist/esm",
-    "dist/types"
-  ],
-  "sideEffects": false,
-  "scripts": {
-    "clean": "rimraf dist",
-    "build": "npm run clean && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json && terser dist/cjs/index.js -o dist/cjs/index.min.js --compress --mangle && terser dist/esm/index.js -o dist/esm/index.min.js --compress --mangle"
-  },
-  "keywords": [
-    "react",
-    "hook",
-    "filter",
-    "usefilter",
-    "search",
-    "list filter",
-    "normalization",
-    "typescript",
-    "frontend",
-    "react hook",
-    "filter hook"
-  ],
-  "author": "Percy Chuzon <contacto@percychuzon.com>",
-  "license": "MIT",
-  "homepage": "https://react-usefilter-hook.percychuzon.com/",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/perch733/perch733-react-usefilter-hook.git"
-  },
-  "bugs": {
-    "url": "https://github.com/perch733/perch733-react-usefilter-hook/issues"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "peerDependencies": {
-    "react": ">=17.0.0",
-    "react-dom": ">=17.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.3.21",
-    "@types/react-dom": "^18.3.7",
-    "rimraf": "^6.0.1",
-    "typescript": "^5.8.3",
-    "terser": "^5.39.2"
-  }
-}
+{
+  "name": "@perch33/react-usefilter-hook",
+  "version": "1.0.4",
+  "description": "A lightweight and reusable React hook for filtering lists with accent normalization, punctuation removal and TypeScript support.",
+  "main": "dist/cjs/index.min.js",
+  "module": "dist/esm/index.min.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.min.js",
+      "require": "./dist/cjs/index.min.js",
+      "types": "./dist/types/index.d.ts"
+    }
+  },
+  "files": [
+    "dist/cjs",
+    "dist/esm",
+    "dist/types"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "test": "vitest run",
+    "clean": "rimraf dist",
+    "build": "npm run clean && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json && terser dist/cjs/index.js -o dist/cjs/index.min.js --compress --mangle && terser dist/esm/index.js -o dist/esm/index.min.js --compress --mangle"
+  },
+  "keywords": [
+    "react",
+    "hook",
+    "filter",
+    "usefilter",
+    "search",
+    "list filter",
+    "normalization",
+    "typescript",
+    "frontend",
+    "react hook",
+    "filter hook"
+  ],
+  "author": "Percy Chuzon <contacto@percychuzon.com>",
+  "license": "MIT",
+  "homepage": "https://react-usefilter-hook.percychuzon.com/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/perch733/perch733-react-usefilter-hook.git"
+  },
+  "bugs": {
+    "url": "https://github.com/perch733/perch733-react-usefilter-hook/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.1",
+    "@types/react": "^18.3.21",
+    "@types/react-dom": "^18.3.7",
+    "jsdom": "^27.4.0",
+    "rimraf": "^6.0.1",
+    "terser": "^5.39.2",
+    "typescript": "^5.8.3",
+    "vitest": "^4.0.17"
+  }
+}