Atomic Pagination

This package generates JavaScript objects for building pagination. Using the generated values, you can create your own pagination with modern web front-end frameworks such as React and Vue.

usage

install package

npm install atomic-pagination

example

Vue(3.x)

<script setup>
import { pagination } from 'atomic-pagination'
import { defineProps, defineEmits, computed } from 'vue'
const props = defineProps({
  current: Number,
  last: Number,
})
const paginationData = computed(() => pagination({
  current: props.current,
  last: props.last,
}))
</script>

<template>
  <ul>
    <li v-if="paginationData.previous">
      <router-link :to="`/?page=${paginationData.previous}`">previous</router-link>
    </li>
    <li v-for="button in paginationData.buttons">
      <router-link :to="`/?page=${button.page}`">{{ button.page }}</router-link>
    </li>
    <li v-if="paginationData.next">
      <router-link :to="`/?page=${paginationData.next}`">next</router-link>
    </li>
  </ul>
</template>

API

pagination()

|setting|required|type|description| |---|---|---|--- |current|o|number|number of current page| |last|o|number|number of last page| |first|-|number|number of first page| |rangeDisplayed|-|number|number of buttons displayed| |hasFirstAndLast|-|boolean|always display the first and last number of buttons or not (must be an odd number)| |hasEllipsis|-|boolean|display ellipsis(...) when numbers are not next to each other or not|

Contributing

Contributions are welcome. Feel free to send a PR.

# development
pnpm i
pnpm dev