search-box-zn

A lightweight and customizable React search box component with:

• ✅ Support for searching list
• 🔍 Searchable, filterable options
• ✨ Clean, flexible, and accessible UI

Demo

Installation

npm install search-box-zn

Import CSS

To apply default styles, import the CSS in your entry/root file:

import "search-box-zn/dist/index.css";

Usage in ReactJs

import React, { useState } from "react";
import SearchBox from "search-box-zn";
import "search-box-zn/dist/index.css";


function App() {
const [data,setData]=useState([
  { name: "mango", price: "200" },
  { name: "apple", price: "160" },
  { name: "banana", price: "120" },
])
  const [result, setResult] = useState([]);

  return (
    <SearchBox
      data={data}
      handleChange={(filteredData) => {
          console.log("Filtered data:", filteredData);
          setResult(filteredData)
        }}
      matchesWith={["name", "price"]}
      //optional
      className="custom-class"
      styles={{
      backgroundColor: "#fff",
      borderRadius: "50px",
      margin: "0px",
      padding: "8px",
      // width: "400px",
    }}
    />
  );
}

export default App;

Props

| Prop | Type | Default | Description | | -------------- | ---------- | ------------------ | ------------------------------------------------------------------------------ | | data | array | [] | Array of items to search (objects with any structure). | | handleChange | function | null | Callback function triggered when a user search. | | matchesWith | array | ["name","price"] | Keys in data objects to match user input against (e.g. ["name", "price"]). | | searchLabel | string | "Search" | Placeholder text shown in the search input field. | | styles | object | {} | Optional inline CSS styles for customizing the input container. | | className | string | "" | Optional class name for custom styling. |