<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

How do I use?

Example:

<Pagination url="/posts" total="22" current="11" theme="inline"></Pagination>

Note: Recommended to use <AdvancedPagination>

`<AdvancedPagination>`

Create link navigation using slots

How do I use?

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

Pagination Example

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>

Keywords

FAQs

What is @astro-bryceguy/pagination?

Is @astro-bryceguy/pagination popular?

Is @astro-bryceguy/pagination well maintained?

Package last updated on 08 Nov 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@astro-bryceguy/pagination