Introduce

This is Pagination UI.
It calculates item counts and shows the content of the page.
It works smooth like a butter🥞
(details👉: https://www.npmjs.com/package/nyam-pagination)

Installation

Copy & paste the following to your CLI:

npm i nyam-pagination

Usage

1. import PaginationLayout from "nyam-pagination"
2. import your Component to render
3. write props**
|prop|type|description|ex| |:--|:--|:--|:--| |Component| |Component to render with pagination | const Component = ({dataToShow})=> {... | |yourDataItems|any[ ] |whole Datas to render to your Component | | |itemsPerPage|number| item counts per one page | 5=> Component will show 5 items | |paginationCount|number| pagination range | 10=> 10 or less pagination button | 4. custom as your style

• ButtonTitle
• ButtonColor

5. deliver data, function etc...needed in yourComponent as props

example 1

import PaginationLayout from "nyam-pagination"; // 1
import YourComponent from "./components/YourComponent"; // 2
import yourDataItems from "./utils/sampleData";

function App() {
  //can edit ButtonTittle
  const ButtonTitle = {
    FIRST: `<< First`,
    PREV: `< Prev`,
    NEXT: `Next >`,
    END: `End  >>`,
  };

  //can edit ButtonColor
  const ButtonColor = "#0000FF";

  return (
    <PaginationLayout
      Component={YourComponent} //3
      itemsPerPage={5}
      paginationCount={10}
      wholeDataItems={yourDataItems}
      ButtonTitle={ButtonTitle}
      ButtonColor={ButtonColor}
    />
  );
}

export default App;

example 2 : When passing a value as a prop

//App.js
function App() {
  return (
    <PaginationLayout
      Component={YourComponent} //3
      itemsPerPage={5}
      paginationCount={10}
      wholeDataItems={yourDataItems}
      ButtonTitle={ButtonTitle}
      ButtonColor={ButtonColor}
      sampleData={sampleData} //optional
      sampleFunc={sampleFunc} //optional
    />
  );
}
export default App;

//YourComponent.js
function YourComponent({wholeDataItems, props}){

  const sampleData = props?.sampleData
  const sampleFunc = props?.sampleFunc
  sampleFunc()
  ...
}
export default YourComponent;