Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
ultimate-pagination
Advanced tools
Universal pagination model generation algorithm that can be used to build a UI component
Universal pagination model generation algorithm that can be used to build a UI component for any JavaScript based platform/framework. The idea behind this module is to move the logic of creating pagination out of the component and place it in a separate module. It allows reusing the same code across different frameworks like Angular, Angular2, React, Ember, etc. Also, the same code can be used to generate pagination on server-side JavaScript frameworks.
Here is a list of modules that uses ultimate-pagination to implement pagination components with different frameworks:
You can install this module via npm:
npm install ultimate-pagination --save
The main method of ultimate-pagination module is getPaginationModel(options)
.
It accepts an object with properties:
currentPage
(number) - current page numbertotalPages
(number) - total number of pagesboundaryPagesRange
(number, optional, default: 1) - number of always visible pages at the beginning and endsiblingPagesRange
(number, optional, default: 1) - number of always visible pages before and after the current onehideEllipsis
(boolean, optional, default: false) - boolean flag to hide ellipsishidePreviousAndNextPageLinks
(boolean, optional, default: false) - boolean flag to hide previous and next page linkshideFirstAndLastPageLinks
(boolean, optional, default: false) - boolean flag to hide first and last page linksvar ultimatePagination = require('ultimate-pagination');
var paginationModel = ultimatePagination.getPaginationModel({
// Required
currentPage: 5,
totalPages: 10,
// Optional
boundaryPagesRange: 1,
siblingPagesRange: 1,
hideEllipsis: false,
hidePreviousAndNextPageLinks: false,
hideFirstAndLastPageLinks: false
});
As a result getPaginationModel(options)
returns an array of items that can be used to render a pagination component:
[
{
type: ITEM_TYPES.FIRST_PAGE_LINK,
key: ITEM_KEYS.FIRST_PAGE_LINK,
value: 1,
isActive: false
},
{
type: ITEM_TYPES.PREVIOUS_PAGE_LINK,
key: ITEM_KEYS.PREVIOUS_PAGE_LINK,
value: 4,
isActive: false
},
{
type: ITEM_TYPES.PAGE,
key: 1,
value: 1,
isActive: false
},
{
type: ITEM_TYPES.ELLIPSIS,
key: ITEM_KEYS.FIRST_ELLIPSIS,
value: 3,
isActive: false
},
{
type: ITEM_TYPES.PAGE,
key: 4,
value: 4,
isActive: false
},
{
type: ITEM_TYPES.PAGE,
key: 5,
value: 5,
isActive: true
},
{
type: ITEM_TYPES.PAGE,
key: 6,
value: 6,
isActive: false
},
{
type: ITEM_TYPES.ELLIPSIS,
key: ITEM_KEYS.SECOND_ELLISPIS,
value: 7,
isActive: false
},
{
type: ITEM_TYPES.PAGE,
key: 10,
value: 10,
isActive: false
},
{
type: ITEM_TYPES.NEXT_PAGE_LINK,
key: ITEM_KEYS.NEXT_PAGE_LINK,
value: 6,
isActive: false
},
{
type: ITEM_TYPES.LAST_PAGE_LINK,
key: ITEM_KEYS.LAST_PAGE_LINK,
value: 10,
isActive: false
}
]
In this example ITEM_TYPES
and ITEM_KEYS
can be imported from ultimate-pagination module, and they contain constants used in the output of the pagination model.
All item has the same structure:
ITEM_TYPES
key
in React, track by
in Angular)PAGE
it also can be used as a label in UI)currentPage
if the same as value
of an item (can be used to highlight a current page or disable first, previous, next or last page links when user is already on first/last page)Here is a list that contains all available ITEM_TYPES
:
PAGE
- a link to a pageELLIPSIS
- an item that represents groups of pages that currently are not visible in paginator (can be used to navigate to the page in the group that is the nearest to the current page)FIRST_PAGE_LINK
- a link to the first pagePREVIOUS_PAGE_LINK
- a link to the previous pageNEXT_PAGE_LINK
- a link to the next pageLAST_PAGE_LINK
- a link to the last pageFAQs
Universal pagination model generation algorithm that can be used to build a UI component
The npm package ultimate-pagination receives a total of 28,812 weekly downloads. As such, ultimate-pagination popularity was classified as popular.
We found that ultimate-pagination demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.