easy-pagination.svgAdaptation Easy Pagination for React and Next.js.Easy Pagination
update 07/27/2026
Version - last 1.1.22 from 07/27/2026
INSTALALTION
1npm i @ssaprt/easy-pagination1yarn add @ssaprt/easy-pagination1pnpm 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};ThemeROUNDED 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>ThemeROUNDED 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>ThemeWHITE
1<Pagination
2 selectTheme="white"
3 mode="horizontal"
4 animationSpeed="400ms"
5>
6 <YourComponentWithList />
7</Pagination>ThemeWHITE VERTICAL
1<Pagination
2 selectTheme="white"
3 mode="vertical"
4 animationSpeed="400ms"
5>
6 <YourComponentWithList />
7</Pagination>ThemeROUNDED 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>ThemeROUNDED 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>ThemeROUNDED AURORA NEBULA
1<Pagination
2 selectTheme="roundedAuroraNebula"
3 mode="horizontal"
4 animationSpeed="400ms"
5>
6 <YourComponentWithList />
7</Pagination>ThemeROUNDED AURORA NEBULA VERTICAL
1<Pagination
2 selectTheme="roundedAuroraNebula"
3 mode="vertical"
4 animationSpeed="400ms"
5>
6 <YourComponentWithList />
7</Pagination>ThemeROUNDED DEEP SPACE VOID
1<Pagination
2 selectTheme="roundedDeepSpaceVoid"
3 mode="horizontal"
4 animationSpeed="400ms"
5>
6 <YourComponentWithList />
7</Pagination>ThemeROUNDED DEEP SPACE VOID VERTICAL
1<Pagination
2 selectTheme="roundedDeepSpaceVoid"
3 mode="vertical"
4 animationSpeed="400ms"
5>
6 <YourComponentWithList />
7</Pagination>ThemeROUNDED ABYSSAL
1<Pagination
2 selectTheme="roundedAbyssal"
3 mode="horizontal"
4 animationSpeed="400ms"
5>
6 <YourComponentWithList />
7</Pagination>ThemeROUNDED ABYSSAL VERTICAL
1<Pagination
2 selectTheme="roundedAbyssal"
3 mode="vertical"
4 animationSpeed="400ms"
5>
6 <YourComponentWithList />
7</Pagination>ThemeROUNDED OCEAN DEPTHS
1<Pagination
2 selectTheme="roundedOceanDepths"
3 mode="horizontal"
4 animationSpeed="400ms"
5>
6 <YourComponentWithList />
7</Pagination>ThemeROUNDED OCEAN DEPTHS VERTICAL
1<Pagination
2 selectTheme="roundedOceanDepths"
3 mode="vertical"
4 animationSpeed="400ms"
5>
6 <YourComponentWithList />
7</Pagination>ThemeSQUARED FOREST MOSS
1<Pagination
2 selectTheme="squaredForestMoss"
3 mode="horizontal"
4 animationSpeed="400ms"
5>
6 <YourComponentWithList />
7</Pagination>ThemeSQUARED FOREST MOSS VERTICAL
1<Pagination
2 selectTheme="squaredForestMoss"
3 mode="vertical"
4 animationSpeed="400ms"
5>
6 <YourComponentWithList />
7</Pagination>ThemeSQUARED CYBERPUNK NEON
1<Pagination
2 selectTheme="squaredCyberpunkNeon"
3 mode="horizontal"
4 animationSpeed="400ms"
5>
6 <YourComponentWithList />
7</Pagination>ThemeSQUARED CYBERPUNK NEON VERTICAL
1<Pagination
2 selectTheme="squaredCyberpunkNeon"
3 mode="vertical"
4 animationSpeed="400ms"
5>
6 <YourComponentWithList />
7</Pagination>ThemeLIGHT BLUE
1<Pagination
2 selectTheme="lightBlue"
3 mode="horizontal"
4 animationSpeed="400ms"
5>
6 <YourComponentWithList />
7</Pagination>ThemeLIGHT BLUE VERTICAL
1<Pagination
2 selectTheme="lightBlue"
3 mode="vertical"
4 animationSpeed="400ms"
5>
6 <YourComponentWithList />
7</Pagination>ThemeDARK
1<Pagination
2 selectTheme="dark"
3 mode="horizontal"
4 animationSpeed="400ms"
5>
6 <YourComponentWithList />
7</Pagination>ThemeDARK VERTICAL
1<Pagination
2 selectTheme="dark"
3 mode="vertical"
4 animationSpeed="400ms"
5>
6 <YourComponentWithList />
7</Pagination>ThemeBLUE
1<Pagination
2 selectTheme="blue"
3 mode="horizontal"
4 animationSpeed="400ms"
5>
6 <YourComponentWithList />
7</Pagination>ThemeBLUE VERTICAL
1<Pagination
2 selectTheme="blue"
3 mode="vertical"
4 animationSpeed="400ms"
5>
6 <YourComponentWithList />
7</Pagination>