React RealTime Search

The ReactRealTimeSearch component is a React functional component that allows you to implement real-time search functionality on a list of options. It takes in an array of Option objects as input and filters them based on the search term entered by the user in the Input component.

Installation

To install the package, run:

npm install react-realtime-search

Usage

To use the ReactRealTimeSearch component, you need to pass in an array of Option objects as a prop:

import ReactRealTimeSearch from "react-realtime-search";

const options = [
  { label: "Option 1", value: "option1" },
  { label: "Option 2", value: "option2" },
  { label: "Option 3", value: "option3" },
  { label: "Option 4", value: "option4" },
  { label: "Option 5", value: "option5" },
];

function App() {
  return <ReactRealTimeSearch data={options} />;
}

You can also customize the styles of the Input, ul, and li components by passing in classNames as props:

function App() {
  return (
    <ReactRealTimeSearch
      data={options}
      inputClassName="input-style"
      ulClassName="ul-style"
      liClassName="li-style"
    />
  );
}

Props

The following props can be passed to the ReactRealTimeSearch component:

data: An array of Option objects. Required. inputClassName: A string representing the className for the Input component. Optional. ulClassName: A string representing the className for the ul component. Optional. liClassName: A string representing the className for the li component. Optional.

License

This component is licensed under the MIT License.