1.0.2 • Published 10 months ago

curpra-search-filter v1.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

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-filter

Usage

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

PropTypeDefaultDescription
dataany[]The data array to be filtered.
searchKeysstring[]The keys to be used for filtering data.
placeholderstring (optional)'Search...'The placeholder text for the search input.
render(filteredData: any[]) => React.ReactElementA function that receives the filtered data and returns the JSX to render.

Authors

Badges

MIT License

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.

1.0.2

10 months ago

1.0.1

10 months ago

1.1.0

2 years ago

1.0.0

2 years ago