2.1.3 • Published 1 year ago
@astro-bryceguy/pagination v2.1.3
@astro-bryceguy/pagination (Deprecated)
NOTE This package is old and deprecated, you can find a better version of these components here: astro-headless-ui
This is a collection of components for paginating data and creating link navigation
<Paginate>
Paginate an array
Astro's paginate() function from getStaticPaths() inside of a component.
Example:
<Paginate page={Astro.params.page} data={await fetch('https://jsonplaceholder.typicode.com/posts').then(response => response.json())}>
{page => (
<section>
{ page.data.map(post => (
<article>
<h2>{post.title}</h2>
<p>{post.body}</p>
</article>
))}
</section>
)}
</Paginate><Pagination>
Create link navigation using objects
Example:
<Pagination url="/posts" total="22" current="11" theme="inline"></Pagination>Note: Recommended to use <AdvancedPagination>
<AdvancedPagination>
Create link navigation using slots
Example:
<AdvancedPagination index total="22" current="11">
<f slot="active">{(page) => <span>{page.number}</span>}</f>
<f slot="disabled">{() => <span>...</span>}</f>
{(page) => <a href={page.href}>{page.number}</a>}
</AdvancedPagination>Examples
This example uses the <Paginate> and <AdvancedPagination> components to paginate a list of posts from the JSONPaceholder API
---
import { Paginate, AdvancedPagination } from '@astro-bryceguy/pagination';
const posts = await fetch('https://jsonplaceholder.typicode.com/posts').then(response => response.json())
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<Paginate data={posts} size="10" page={Astro.params.page}>
{ page => (
<section>
{ page.data.map(post => (
<article>
<h2>{post.id} - {post.title}</h2>
<p>{post.body}</p>
</article>
))}
</section>
<nav>
<AdvancedPagination total={page.last} current={page.current} middle="1">
<f slot="active">{page => <span>{page.number}</span>}</f>
<f slot="disabled">{() => <span>...</span>}</f>
{page => <a href={page.href}>{page.number}</a>}
</AdvancedPagination>
</nav>
)}
</Paginate>
</body>
</html>