@astrum-ui/paginate v1.0.2

@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