Svelte-paginate-store NPM

svelte-paginate-store

A package that adds pagination to your data and makes it easily accessible using the store functionality from 'svelte/store'.

Motivation

Hey! My name is Steven, nice to meet you!

I've really enjoyed working with Svelte and wanted to contribute to the community in some way, this is a package that I built for an ecommerce project (gallery of products) and I hope it will be of use to you.

Also this is my 🎉🎉🎉 FIRST EVER 🎉🎉🎉 package released into the wild, feedback and contributions are most welcome!

Build status

npm

Code style

Code is formatted with prettier.

Emojis are for visual pleasure (not obligatory):

Build 🏗️ Test 🔬 Edit 🖊️

Screenshot

npm.io

Framework

Built with

Svelte - Cybernetically enhanced web apps.

Features & Code

Paginate Data and Store Creation

./src/store.js

import { paginateStore } from 'svelte-paginate-store'

// Fetch data from database or API
const data = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]

const options = {
  store: true,
  currentPage: 1,
  perPage: 2
}

export const users = paginateStore(data, options)

Pagination Management

./src/index.svelte

<script>
  import { users } from './store.js

  $: console.log($users)

  // $users has access to paginated data via auto-subscription
  // #=> [{ id: 1 }, { id: 2 }]

  // users has access to the core pagination methods below
  const { prevPage, nextPage, goToPage, updatePerPage } = users

  nextPage() // $users => [{ id: 3 }, { id: 4 }]

  prevPage() // $users => [{ id: 1 }, { id: 2 }]

  goToPage(2) // $users => [{ id: 3 }, { id: 4 }]

  updatePerPage(4) // $users => [{ id: 1 }, ..., { id: 4 }]
</script>

Store Management

./src/index.svelte

<script>
  import { users } from './store.js

  ...

  // users has access to a store (see below)
  // and the addToStore method for store management
  const { store, addToStore } = users

  $: console.log(store)

  // store has access to all users data
  // #=> [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]

  // Fetch data from database or API
  const data = [{ id: 5 }, { id: 6 }]

  addToStore(data) // store => [{ id: 1 }, ..., { id: 6 }]
</script>

Default Options

  const defaultOptions = {
    store: false,
    currentPage: 1,
    perPage: 4
  }

  export const store = paginateStore([], defaultOptions)

  /***
    $store => {
      store: null,
      currentPage: 1,
      perPage: 4,
      totalPages: 0,
      from: 0,
      to: 0,
      data: []
    }
  ***/