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