<snappy-pagination>

An easy-to use pagination element. (1 kb)

Demo

Installation

Option 1: As a package.

1npm i @snappywc/pagination

1import '@snappywc/pagination'

Option 2: In your markup.

1<script type="module">
2  import '//unpkg.com/@snappywc/pagination'
3</script>

Usage

HTML

1<snappy-pagination></snappy-pagination>

JavaScript

1// 1: Create a function that will run when the page changes.
2const fetchPhotos = (page) => {
3  fetch(`https://picsum.photos/v2/list?page=${page}&limit=20`)
4    .then((res) => res.json())
5    .then((photos) => renderPhotos(photos));
6};
7
8// 2: Query your <snappy-pagination> element.
9const pagination = document.querySelector("snappy-pagination");
10
11// 3: Run the setup function with the desired options
12pagination.setup({
13  total: 50, // Number of pages available
14  spread: 2, // Number of pages to show left/right of current page
15})
16
17// 4: Listen for the component's `page-changed` event
18pagination.addEventListener("page-changed", (e) => {
19  // 4.1 pass e.detail.page to your function
20  fetchPhotos(e.detail.page);
21});
22
23fetchPhotos(1);

Customization

The default styles and part selectors for this element were carefully considered to be as minimal and un-opinionated as possible.

Parts

The following parts are available for styling.

name	description
page	each numbered page button
current-page	the current page's button
prev	the previous page button
next	the next page button

Example CSS

1snappy-pagination::part(page) {
2  color: red;
3  font-weight: bold;
4}

Slots

The following slots are available to customize the element's markup.

name	description	default
prev	the previous button's content	❮
next	the next button's content	❯
ellipsis	shown between pages	...

Example HTML

1<snappy-pagination total="50" range="2">
2  <svg slot="prev" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
3    <path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" />
4  </svg>
5  <svg slot="next" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
6    <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
7  </svg>
8</snappy-pagination>