1.0.2 • Published 11 months ago
curpra-search-filter v1.0.2
Curpra Search Filter
A simple search filter component for React TypeScript projects.
Installation
Install the library with either yarn or npm
npm install curpra-search-filter
yarn add curpra-search-filterUsage
First, import SearchFilter from the component:
import {SearchFilter} from 'curpra-search-filter';Next, use the SearchFilter component in your application:
import React from 'react';
import { SearchFilter } from 'curpra-search-filter';
interface DataItem {
  id: number;
  name: string;
  age: number;
}
const data: DataItem[] = [
  { id: 1, name: 'Alice', age: 30 },
  { id: 2, name: 'Bob', age: 25 },
  { id: 3, name: 'Carol', age: 28 },
];
const App: React.FC = () => {
  return (
    <div>
      <SearchFilter
        data={data}
        searchKeys={['name', 'age']}
        placeholder="Search by name or age"
        render={(filteredData) => (
          <ul>
            {filteredData.map((item: DataItem) => (
              <li key={item.id}>{`${item.name} (${item.age})`}</li>
            ))}
          </ul>
        )}
      />
    </div>
  );
};
export default App;Props
PropsType
| Prop | Type | Default | Description | 
|---|---|---|---|
| data | any[] | The data array to be filtered. | |
| searchKeys | string[] | The keys to be used for filtering data. | |
| placeholder | string(optional) | 'Search...' | The placeholder text for the search input. | 
| render | (filteredData: any[]) => React.ReactElement | A function that receives the filtered data and returns the JSX to render. | 
Authors
Badges
This README provides a brief description of the library, installation instructions, usage example, and a table of props. You can modify the contents according to your specific package requirements. Remember to commit the README file to your repository and push the changes.