ts-searchbox-component

Package to provide a reusable React component designed to facilitate searching functionality within web applications. It provides an input field for users to enter search queries along with icons for clearing the search text and initiating the search action.

Installation

ts-searchbox-component

ts-searchbox-component is available as an npm package.

npm:

npm i ts-searchbox-component

yarn:

yarn add ts-searchbox-component

Getting started with ts-search-box

Example

import React, { useState } from "react";
import "./App.css";
import SearchBox from "ts-searchbox-component";

function App() {
  const placeHolder = " Search by Id, name, mobile number";

  const [searchText, setSearchText] = React.useState("");

  const onSearch = (searchContent: string) => {
    setSearchText(searchContent);
  };

  return (
    <div className="App">
      <div>
        <h2>Search Results With Default Style</h2>
        <h3>Searched For: {searchText}</h3>
        <SearchBox
          onSearch={onSearch}
          placeHolder={placeHolder}
          value={searchText}
        />
      </div>
      <div>
        <h2>Search Results With Custom Style</h2>
        <h3>Searched For: {searchText}</h3>
        <SearchBox
          onSearch={onSearch}
          placeHolder={placeHolder}
          value={searchText}
          className={"input-control"}
        />
      </div>
    </div>
  );
}

export default App;

Props

| Name | Type | Default | Required | Description | | :---------- | :-----------: | ------: | :------: | --------------------------------------------------------------------------------------------------------------------- | | placeHolder | string | Search | No | The placeholder text to be displayed in the search input field. If not provided, the default placeholder is 'Search'. | | onSearch | function | | Yes | A function that will be called when the user initiates a search action. It receives the search query as an argument. | | value | string | | No | The initial value of the search input field. If provided, it pre-fills the input field with the specified value. | | className | css classname | | No | Additional CSS classes to be applied to the SearchBox container. |

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.