0.0.9 • Published 1 year ago

@eran-or/rr-pagination v0.0.9

Weekly downloads
-
License
ISC
Repository
github
Last release
1 year ago

rr-pagination

The rr-pagination package is created to orchestrate with react router applications. In a nutshell, it adds a page parameter to the query string params.

It is also has a basic accesibility and you can inject your language labels, text and class names to control the visuality.

You can also inject a callback function that gets the event and page namber that has been clcicked.

It should work with SSR or CSR application.

Usage

#index.js

import {
  createBrowserRouter,
  RouterProvider,
  Route,
} from "react-router-dom";
import "./index.css";

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);
#App.js

    import '@eran-or/rr-pagination/dist/index.css'
    import Pagination from '@eran-or/rr-pagination/'

function App() {
  
  return (
    <div className="App">
      <Pagination itemsPerPage={5} totalItems={20} />
    </div>
  );
}

export default App;

Options

? means optional

PropertyvalueTypedefaultValue
itemsPerPagenumber5
totalItemsnumber0
rangeSize?number3
classNames?string
previousText?stringPrevious
GotoPageAriaLabel?stringGo to page
nextText?stringNext
nextTextAriaLabel?stringGo to Next page
previousTextAriaLabel?stringBack to previous page
currentPageAriaLabel?stringCurrent Page is
paginationAriaLabel?stringPagination
onClick?function(e: React.MouseEvent, pageNum: number) => void;