@astrum-ui/paginate

Introducing Astrum-UI/Paginate: A versatile React component for creating paginated lists with ease.

Installation

npm install --save @astrum-ui/paginate

or access the complete suite of components

npm install --save @astrum-ui/core

Variants

There are two variants of pagination buttons

Usage

Basic example

import Paginate from @astrum-ui/paginate
import { useState } from 'react'

const Card = ({ cardData }) => {
  return (
    <div>
      <p>{cardData.name}</p>
    </div>
  )
}

export default function HelloModal() {
 const [data, setData] = useState([
  { name: 'Card 1' },
  { name: 'Card 2' },
  { name: 'Card 3' },
 ])

 return (
  <Paginate
    items={data}
    itemsPerPage={2}
    renderItem={(item, index) => <Card key={index} cardData={item} >}
  />
 )
}

More examples

• Blog Cards

Options

Here's a list of all the options available to customize this component according to your need

* for required - for any value of specified type

| Name | Type | Default Value | Available Values | Description | | --------------- | :------: | :-----------: | :--------------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------- | | items * | array | [] | - | An array of items to be paginated | | itemsPerPage * | number | 10 | - | Number of items to display per page | | renderItem * | callback | () => <></> | - | Callback function that renders each item in the pagination. Defaults to an empty JSX element | | onNoItem | callback | () => No item | - | Callback function called when there are no items to display | | variant | number | 1 | 1, 2 | The variant of pagination style to use. Can be either 1 or 2 | | activePage | number | 1 | - | To set active page number at any time | | onPageChange | callback | () => {} | - | A callback function called when the active page changes | | styles | object | {} | { container: {}, button: {}, buttonContainer: {}, activeButton: {} } | custom styles for different parts of the pagination component. activeButton will be applied in variant 2 | | classNames | object | {} | { container: "", button: "", buttonContainer: "" } | custom classes for different parts of the pagination component |