0.2.2 • Published 3 years ago
nyam-pagination v0.2.2
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
- 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;