sx-paginate
v5.0.0
Published
Made with create-react-library
Downloads
15
Readme
sx-paginate
DEMO - https://stackblitz.com/edit/react-hctxyq?file=src/App.js
Install
npm install --save sx-paginate
Usage
import React, { useState, useEffect } from 'react'
import { SxPaginate } from 'sx-paginate'
import 'sx-paginate/dist/index.css'
const App = () => {
const [posts, setPosts] = useState([])
const [paginatedPosts, setPaginatedPosts] = useState([])
const onPaginate = (pageNumber: number) => {
console.log(pageNumber)
}
useEffect(() => {
(async () => {
const res = await fetch('https://dummyjson.com/posts')
const data = await res.json()
setPosts(data.posts)
})()
}, [])
useEffect(() => {
console.log(paginatedPosts)
}, [paginatedPosts])
return (
<>
{paginatedPosts.map((post: any) => (
<div key={post.id}>{post.title}</div>
))}
<SxPaginate
recordsPerPage={10}
onPaginate={onPaginate}
records={posts}
setRecords={setPaginatedPosts as any}
activeBtnStyle={{ background: 'coral' }}
/>
</>
)
}
export default App
Options
| Options | Description | | ------------------------ | ----------------------------------------------------------------- | | recordsPerPage | Records display on the page eg. 10 | | records | Array of recrods | | onPaginate | functon takes paginated page number as an arguemnent (pageNumber) => {console.log(pageNumber)}| | setRecords | function to get paginated records | | buttonStyle ? | CSS Properties | | activeBtnStyle ? | CSS Properties | | ellipses? | {Boolean} show ellipses for long pagination | | activeColor | {String} color value to chnage the background color of active page|
License
MIT © suboor123