react-pagination-search
is a React library that provides a simple way to paginate and search through large amounts of data.
npm install react-pagination-search
To use react-pagination-search
, you'll need to wrap your component in a PaginationSearch
and set up the necessary state and callbacks:
import PaginationSearch from 'react-pagination-search';
const data = [{id: 1, name: 'John'}, {id: 2, name: 'Doe'}, ...];
function MyComponent() {
return (
<PaginationSearch
data={data}
itemsPerPage={20}
>
<PaginationSearch.Searchbox />
<PaginationSearch.Data
render={(item) => {
return (
<div>
{item.name}
</div>
)
}}
/>
<PaginationSearch.Buttons />
</PaginationSearch>
);
}
export default MyComponent;
-
data
: An array of data to be paginated. -
itemsPerPage
: The number of items to be displayed per page. Default:10
.
-
PaginationSearch.Searchbox
: A search input component that filters the paginated data. It takes the following props:-
placeholder
: A placeholder to be showed in the search bar, the default value is -
showSearchButton
: A boolean that indicates whether the search button is displayed. Even if is displayed, you can still search by typingenter
in the searchbar. -
searchButton
: A custom component to be the search button. It already has thevalue
,onChange
andonKeyDown
props. -
searchInput
: A custom component to be the search input. It already has an onclick prop.
-
-
PaginationSearch.Buttons
: A component that displays pagination buttons. -
PaginationSearch.Data
: This component renders the data for the current page. It takes the following props:-
render
: A function that takes an item from the data array and returns a React component to render that item.
-
Thank you for considering contributing to react-pagination-search
! We welcome any contributions, whether they be bug fixes, feature requests, documentation improvements, or anything in between.
To contribute, please follow these steps:
- Fork the repository.
- Create a new branch for your contribution.
- Make your changes and commit them, with descriptive commit messages.
- Push your branch to your forked repository.
- Open a pull request with a clear title and description of your changes.
We appreciate your contributions and hope to work with you soon!