Utility Lab

Easy Pagination

update 07/27/2026

Adaptation Easy Pagination for React and Next.js.

Version - last 1.1.22 from 07/27/2026

1.1.22

07/27/2026

Fixed bugs

Fixed some bugs

1.1.21

07/27/2026

Fixed bugs

Fixed some bugs

1.1.20

07/27/2026

Fixed bugs

Fixed some bugs

1.0.19

07/27/2026

Fixed bugs

Fixed some bugs

1.0.18

07/27/2026

Fixed bugs

Fixed some bugs

1.0.17

07/27/2026

Fixed bugs

Fixed some bugs

1.0.16

07/27/2026

Fixed bugs

Fixed some bugs

1.0.15

07/27/2026

fixed bugs

Fixed some bugs

1.0.14

07/24/2026

Improvements

Code changes that do not affect behavior

1.0.13

07/24/2026

Improvements

Code changes that do not affect behavior

1.0.12

07/24/2026

Fixed bugs

Code changes that do not affect behavior

1.0.11

07/24/2026

Fixed bugs

Behavior changed: the component no longer automatically writes the pagination index upon loading; it waits until the first click

1.0.10

07/24/2026

Fixed bugs

Delete logs

1.0.9

07/24/2026

Fixed bugs

Delete empty constants

1.0.8

07/24/2026

Fixed bugs

Fixed indexing behavior. Resolved an issue when working with Next Link

1.0.7

07/17/2026

Added indexing

Indexing support added. Writing to localStorage and URL

1.0.6

07/15/2026

Fixed bugs

Slider behavior has been modified based on screen size and content compression

1.0.5

07/15/2026

Fixed bugs

Fixed animation

1.0.4

07/15/2026

Fixed bugs

Fixed size container

1.0.3

07/15/2026

Fixed bugs

Fixed position of buttons

1.0.2

07/14/2026

Fixed bugs

Delete console logs

1.0.1

07/14/2026

Delete some types

Deleted types and interfaces

1.0.0

07/14/2026

Publish

Created component

INSTALALTION

1npm i @ssaprt/easy-pagination

1yarn add @ssaprt/easy-pagination

1pnpm install @ssaprt/easy-pagination

HOW USE

EXAMPLE

1import "@ssaprt/easy-pagination/style.css";
2import { Pagination } from "@ssaprt/easy-pagination";
3// import type { PresetsType } from "@ssaprt/easy-pagination";
4    
5export const App = () => {
6/***
7const yourTheme: PresetsType = {
8        
9}
10*/
11    return (
12        <Pagination
13            items={[1, 2, 3]} // required
14            // selectTheme={yourTheme} // optional. You can choose from presets or custom. Default white
15            // navigation="full" // optional("start" | "end" | "full"). Default full
16            // mode="horizontal" // optional("vertical" | "horizontal"). Default horizontal
17            // arrowStart={} // optional
18            // arrowEnd={} // optional
19            // itemsPerPage={10} // optional. Default 10
20            // animationSpeed="300ms" // optional (`${number}ms`). Default 600ms
21            
22             /*** optional
23            theme={{
24                Setup information is below  →
25            }}
26            */
27        >
28            <YourComponent />
29        </Pagination>
30    )
31}
32    
33    
34import { useList } from "@ssaprt/easy-pagination";
35import { useProgress } from "@ssaprt/easy-pagination";
36import { useEffect } from "react";
37
38export const YourComponent = () => {
39    const newList: yourType[] = useList();
40    const { start, end, progress } = useProgress();
41
42    const blur = start ? 12 : 0;
43
44    useEffect(() => {
45        const header = document.querySelector("#root") as HTMLDivElement;
46        if (!header) return;
47
48        header.style.left = `0%`;
49        header.style.transition = "0s";
50        header.style.opacity = "0.7";
51        header.style.width = `${progress}%`;
52
53        if (progress === 100) {
54            requestAnimationFrame(() => {
55                header.style.transition = "opacity 1s linear";
56                header.style.opacity = "0";
57            });
58        }
59    }, [start, end, progress]);
60
61    return (
62        <div className="relative h-full w-full flex flex-1 items-center justify-center flex-wrap gap-1 overflow-y-auto p-2">
63            <div
64                className={`
65                    rounded-[24px] 
66                    z-2 w-full 
67                    h-full 
68                    bg-transparent 
69                    absolute 
70                    left-0 
71                    top-0 
72                    backdrop-blur-[${blur}px] 
73                    transition-backdrop-filter 
74                    duration-300 
75                    ease-in-out`
76                }
77            ></div>
78            {newList.map((item, i) => (
79                <span className="text-[30px] relative" key={i}>
80                    {item}
81                </span>
82            ))}
83        </div>
84    );
85};

INDEXING

1import "@ssaprt/easy-pagination/style.css";
2import { Pagination } from "@ssaprt/easy-pagination";
3
4export const App = () => {
5
6    return (
7        <Pagination
8            items={[1, 2, 3]} // required
9            indexing= {{ mode: "url", key: "yourKeyName" }} // optional. Default state don't have indexing
10        >
11            <YourComponent />
12        </Pagination>
13    )
14};

FINE-TUNING THEME

1theme={{
2    // Root <Pagination />
3    style: {},
4    className: "",
5
6    // Main container
7    main: {
8        style: {},
9        className: "",
10    },
11
12    // Navigation wrapper
13    navigation: {
14        style: {},
15        className: "",
16    },
17
18    // Track with page buttons
19    track: {
20        style: {},
21        className: "",
22    },
23
24    // Navigation button
25    button: {
26        style: {},
27        className: "",
28
29        background: "",
30        color: "",
31
32        border: "",
33        // or
34        borderWidth: 0,
35        borderColor: "",
36        borderStyle: "solid",
37        borderRadius: "",
38
39        shadowDirectionSize: 0,
40        shadowDirectionColor: "",
41        shadowDirectionBlur: 0,
42
43        active: {
44            background: "",
45            color: "",
46
47            border: "",
48            // or
49            borderWidth: 0,
50            borderColor: "",
51            borderStyle: "solid",
52            borderRadius: "",
53
54            shadowDirectionColor: "",
55        },
56    },
57
58    // Page item
59    items: {
60        style: {},
61        className: "",
62
63        w: 40,
64        h: 40,
65
66        background: "",
67        color: "",
68
69        border: "",
70        // or
71        borderWidth: 0,
72        borderColor: "",
73        borderStyle: "solid",
74        borderRadius: "",
75
76        transition: "",
77
78        hover: {
79            background: "",
80            color: "",
81            transition: "",
82
83            border: "",
84            // or
85            borderWidth: 0,
86            borderColor: "",
87            borderStyle: "solid",
88            borderRadius: "",
89        },
90
91        active: {
92            background: "",
93            color: "",
94            transition: "",
95
96            border: "",
97            // or
98            borderWidth: 0,
99            borderColor: "",
100            borderStyle: "solid",
101            borderRadius: "",
102        },
103    },
104
105    // Arrows
106    arrows: {
107        style: {},
108        className: "",
109
110        w: 40,
111        h: 40,
112
113        background: "",
114        color: "",
115        fill: "",
116        stroke: "",
117
118        borderRadius: "",
119
120        transform: "",
121        transition: "",
122
123        icon: {
124            style: {},
125            className: "",
126
127            w: 20,
128            h: 20,
129        },
130
131        hover: {
132            background: "",
133            color: "",
134            fill: "",
135            stroke: "",
136            borderRadius: "",
137            transform: "",
138            transition: "",
139        },
140
141        active: {
142            background: "",
143            color: "",
144            fill: "",
145            stroke: "",
146            borderRadius: "",
147            transform: "",
148            transition: "",
149        },
150
151        disabled: {
152            background: "",
153            color: "",
154            fill: "",
155            stroke: "",
156            borderRadius: "",
157            transform: "",
158            transition: "",
159        },
160    },
161}}

YOUR THEME

1import type { PresetsType } from "@ssaprt/easy-pagination";
2const yourTheme: PresetsType = {
3    style: {},
4    className: "",
5
6    main: {
7        style: {},
8        className: "",
9    },
10
11    navigation: {
12        style: {},
13        className: "",
14    },
15
16    track: {
17        style: {},
18        className: "",
19    },
20
21    items: {
22        w: 0,
23        h: 0,
24
25        style: {},
26        className: "",
27
28        background: "",
29        color: "",
30
31        border: "",
32        // or
33        borderWidth: 0,
34        borderColor: "",
35        borderStyle: "",
36
37        borderRadius: "",
38        transition: "",
39
40        hover: {
41            background: "",
42            color: "",
43
44            border: "",
45            // or
46            borderWidth: 0,
47            borderColor: "",
48            borderStyle: "",
49
50            borderRadius: "",
51            transition: "",
52        },
53
54        active: {
55            background: "",
56            color: "",
57
58            border: "",
59            // or
60            borderWidth: 0,
61            borderColor: "",
62            borderStyle: "",
63
64            borderRadius: "",
65            transition: "",
66        },
67    },
68
69    button: {
70        style: {},
71        className: "",
72
73        background: "",
74        color: "",
75
76        border: "",
77        // or
78        borderWidth: 0,
79        borderColor: "",
80        borderStyle: "",
81
82        borderRadius: "",
83
84        shadowDirectionSize: 0,
85        shadowDirectionColor: "",
86        shadowDirectionBlur: 0,
87
88        active: {
89            background: "",
90            color: "",
91
92            border: "",
93            // or
94            borderWidth: 0,
95            borderColor: "",
96            borderStyle: "",
97
98            borderRadius: "",
99
100            shadowDirectionColor: "",
101        },
102    },
103
104    arrows: {
105        style: {},
106        className: "",
107
108        w: 0,
109        h: 0,
110
111        background: "",
112        color: "",
113        fill: "",
114        stroke: "",
115
116        borderRadius: "",
117
118        transform: "",
119        transition: "",
120
121        icon: {
122            style: {},
123            className: "",
124
125            w: 0,
126            h: 0,
127        },
128
129        hover: {
130            background: "",
131            color: "",
132            fill: "",
133            stroke: "",
134
135            borderRadius: "",
136
137            transform: "",
138            transition: "",
139        },
140
141        active: {
142            background: "",
143            color: "",
144            fill: "",
145            stroke: "",
146
147            borderRadius: "",
148
149            transform: "",
150            transition: "",
151        },
152
153        disabled: {
154            background: "",
155            color: "",
156            fill: "",
157            stroke: "",
158
159            borderRadius: "",
160
161            transform: "",
162            transition: "",
163        },
164    },
165};

Themespeed (ms)ROUNDED RICH

1<Pagination
2    selectTheme="roundedRich"
3    mode="horizontal"
4    animationSpeed="300ms"
5    indexing={{
6        mode: "url",
7        key: "roundedRich",
8    }}
9>
10    <YourComponentWithList />
11</Pagination>

Themespeed (ms)ROUNDED RICH VERTICAL

1<Pagination
2    selectTheme="roundedRich"
3    mode="vertical"
4    animationSpeed="300ms"
5    indexing={{
6        mode: "url",
7        key: "roundedRichVertical",
8    }}
9>
10    <YourComponentWithList />
11</Pagination>

Themespeed (ms)WHITE

1<Pagination
2    selectTheme="white"
3    mode="horizontal"
4    animationSpeed="400ms"
5>
6    <YourComponentWithList />
7</Pagination>

Themespeed (ms)WHITE VERTICAL

1<Pagination
2    selectTheme="white"
3    mode="vertical"
4    animationSpeed="400ms"
5>
6    <YourComponentWithList />
7</Pagination>

Themespeed (ms)ROUNDED SPACE

1<Pagination
2    selectTheme="roundedSpace"
3    mode="horizontal"
4    animationSpeed="400ms"
5    indexing={{
6        mode: "storage",
7        key: "roundedSpace",
8    }}
9>
10    <YourComponentWithList />
11</Pagination>

Themespeed (ms)ROUNDED SPACE VERTICAL

1<Pagination
2    selectTheme="roundedSpace"
3    mode="vertical"
4    animationSpeed="400ms"
5    indexing={{
6        mode: "storage",
7        key: "roundedSpaceVertical",
8    }}
9>
10    <YourComponentWithList />
11</Pagination>

Themespeed (ms)ROUNDED AURORA NEBULA

1<Pagination
2    selectTheme="roundedAuroraNebula"
3    mode="horizontal"
4    animationSpeed="400ms"
5>
6    <YourComponentWithList />
7</Pagination>

Themespeed (ms)ROUNDED AURORA NEBULA VERTICAL

1<Pagination
2    selectTheme="roundedAuroraNebula"
3    mode="vertical"
4    animationSpeed="400ms"
5>
6    <YourComponentWithList />
7</Pagination>

Themespeed (ms)ROUNDED DEEP SPACE VOID

1<Pagination
2    selectTheme="roundedDeepSpaceVoid"
3    mode="horizontal"
4    animationSpeed="400ms"
5>
6    <YourComponentWithList />
7</Pagination>

Themespeed (ms)ROUNDED DEEP SPACE VOID VERTICAL

1<Pagination
2    selectTheme="roundedDeepSpaceVoid"
3    mode="vertical"
4    animationSpeed="400ms"
5>
6    <YourComponentWithList />
7</Pagination>

Themespeed (ms)ROUNDED ABYSSAL

1<Pagination
2    selectTheme="roundedAbyssal"
3    mode="horizontal"
4    animationSpeed="400ms"
5>
6    <YourComponentWithList />
7</Pagination>

Themespeed (ms)ROUNDED ABYSSAL VERTICAL

1<Pagination
2    selectTheme="roundedAbyssal"
3    mode="vertical"
4    animationSpeed="400ms"
5>
6    <YourComponentWithList />
7</Pagination>

Themespeed (ms)ROUNDED OCEAN DEPTHS

1<Pagination
2    selectTheme="roundedOceanDepths"
3    mode="horizontal"
4    animationSpeed="400ms"
5>
6    <YourComponentWithList />
7</Pagination>

Themespeed (ms)ROUNDED OCEAN DEPTHS VERTICAL

1<Pagination
2    selectTheme="roundedOceanDepths"
3    mode="vertical"
4    animationSpeed="400ms"
5>
6    <YourComponentWithList />
7</Pagination>

Themespeed (ms)SQUARED FOREST MOSS

1<Pagination
2    selectTheme="squaredForestMoss"
3    mode="horizontal"
4    animationSpeed="400ms"
5>
6    <YourComponentWithList />
7</Pagination>

Themespeed (ms)SQUARED FOREST MOSS VERTICAL

1<Pagination
2    selectTheme="squaredForestMoss"
3    mode="vertical"
4    animationSpeed="400ms"
5>
6    <YourComponentWithList />
7</Pagination>

Themespeed (ms)SQUARED CYBERPUNK NEON

1<Pagination
2    selectTheme="squaredCyberpunkNeon"
3    mode="horizontal"
4    animationSpeed="400ms"
5>
6    <YourComponentWithList />
7</Pagination>

Themespeed (ms)SQUARED CYBERPUNK NEON VERTICAL

1<Pagination
2    selectTheme="squaredCyberpunkNeon"
3    mode="vertical"
4    animationSpeed="400ms"
5>
6    <YourComponentWithList />
7</Pagination>

Themespeed (ms)LIGHT BLUE

1<Pagination
2    selectTheme="lightBlue"
3    mode="horizontal"
4    animationSpeed="400ms"
5>
6    <YourComponentWithList />
7</Pagination>

Themespeed (ms)LIGHT BLUE VERTICAL

1<Pagination
2    selectTheme="lightBlue"
3    mode="vertical"
4    animationSpeed="400ms"
5>
6    <YourComponentWithList />
7</Pagination>

Themespeed (ms)DARK

1<Pagination
2    selectTheme="dark"
3    mode="horizontal"
4    animationSpeed="400ms"
5>
6    <YourComponentWithList />
7</Pagination>

Themespeed (ms)DARK VERTICAL

1<Pagination
2    selectTheme="dark"
3    mode="vertical"
4    animationSpeed="400ms"
5>
6    <YourComponentWithList />
7</Pagination>

Themespeed (ms)BLUE

1<Pagination
2    selectTheme="blue"
3    mode="horizontal"
4    animationSpeed="400ms"
5>
6    <YourComponentWithList />
7</Pagination>

Themespeed (ms)BLUE VERTICAL

1<Pagination
2    selectTheme="blue"
3    mode="vertical"
4    animationSpeed="400ms"
5>
6    <YourComponentWithList />
7</Pagination>