diff --git a/jest.config.js b/jest.config.js
index 66a2c875..55b2a26f 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,3 +1,12 @@
+const pkg = require('./package.json');
 module.exports = {
   snapshotSerializers: [require.resolve('enzyme-to-json/serializer')],
+  moduleNameMapper: {
+    [pkg.name]: '<rootDir>/src/index.ts',
+    '\\.less$': 'identity-obj-proxy',
+  },
+  collectCoverageFrom: [
+    'src/**',
+    '!src/locale/**',
+  ],
 };
diff --git a/package.json b/package.json
index 72b9b82a..437d4cb8 100644
--- a/package.json
+++ b/package.json
@@ -45,8 +45,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.10.1",
-    "classnames": "^2.2.1",
-    "rc-util": "^5.32.2"
+    "classnames": "^2.3.2",
+    "rc-util": "^5.38.0"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^1.0.0",
@@ -67,6 +67,7 @@
     "gh-pages": "^4.0.0",
     "glob": "^7.1.6",
     "husky": "^8.0.3",
+    "identity-obj-proxy": "^3.0.0",
     "less": "^3.10.3",
     "lint-staged": "^15.0.2",
     "np": "^7.0.0",
diff --git a/src/KeyCode.ts b/src/KeyCode.ts
deleted file mode 100644
index a85d600c..00000000
--- a/src/KeyCode.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-const KeyCode =  {
-  ZERO: 48,
-  NINE: 57,
-
-  NUMPAD_ZERO: 96,
-  NUMPAD_NINE: 105,
-
-  BACKSPACE: 8,
-  DELETE: 46,
-  ENTER: 13,
-
-  ARROW_UP: 38,
-  ARROW_DOWN: 40,
-};
-
-export default KeyCode;
\ No newline at end of file
diff --git a/src/Options.tsx b/src/Options.tsx
index a505c379..14b8cf8f 100644
--- a/src/Options.tsx
+++ b/src/Options.tsx
@@ -1,63 +1,75 @@
-/* eslint react/prop-types: 0 */
+import type { SelectProps } from 'rc-select';
+import type { OptionProps } from 'rc-select/es/Option';
+import KEYCODE from 'rc-util/lib/KeyCode';
 import React from 'react';
-import KEYCODE from './KeyCode';
+import type { PaginationLocale } from './interface';
 
-interface Props {
-  disabled: boolean;
-  locale: any;
+interface InternalSelectProps extends SelectProps {
+  /**
+   * form antd v5.5.0, popupMatchSelectWidth default is true
+   */
+  popupMatchSelectWidth?: boolean;
+}
+
+interface OptionsProps {
+  disabled?: boolean;
+  locale: PaginationLocale;
   rootPrefixCls: string;
-  selectPrefixCls: string;
-  current: number;
+  selectPrefixCls?: string;
   pageSize: number;
-  pageSizeOptions: (string | number)[];
-  goButton: boolean | string;
-  changeSize: (size: number) => void;
-  quickGo: (value: number) => void;
+  pageSizeOptions?: (string | number)[];
+  goButton?: boolean | string;
+  changeSize?: (size: number) => void;
+  quickGo?: (value: number) => void;
   buildOptionText?: (value: string | number) => string;
-  selectComponentClass: React.ComponentType<any> & {
-    Option?: React.ComponentType<any>;
+  selectComponentClass: React.ComponentType<Partial<InternalSelectProps>> & {
+    Option?: React.ComponentType<Partial<OptionProps>>;
   };
 }
 
-interface State {
-  goInputText: string;
-}
-
-class Options extends React.Component<Props, State> {
-  static defaultProps = {
-    pageSizeOptions: ['10', '20', '50', '100'],
-  };
-
-  state = {
-    goInputText: '',
-  };
-
-  getValidValue = () => {
-    const { goInputText } = this.state;
-    // eslint-disable-next-line no-restricted-globals
+const defaultPageSizeOptions = ['10', '20', '50', '100'];
+
+function Options(props: OptionsProps) {
+  const {
+    pageSizeOptions = defaultPageSizeOptions,
+    locale,
+    changeSize,
+    pageSize,
+    goButton,
+    quickGo,
+    rootPrefixCls,
+    selectComponentClass: Select,
+    selectPrefixCls,
+    disabled,
+    buildOptionText,
+  } = props;
+
+  const [goInputText, setGoInputText] = React.useState('');
+
+  const getValidValue = () => {
     return !goInputText || Number.isNaN(goInputText)
       ? undefined
       : Number(goInputText);
   };
 
-  buildOptionText = (value: string) =>
-    `${value} ${this.props.locale.items_per_page}`;
+  const mergeBuildOptionText =
+    typeof buildOptionText === 'function'
+      ? buildOptionText
+      : (value: string) => `${value} ${locale.items_per_page}`;
 
-  changeSize = (value: number) => {
-    this.props.changeSize(Number(value));
+  const changeSizeHandle = (value: number) => {
+    changeSize?.(Number(value));
   };
 
-  handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    this.setState({ goInputText: e.target.value });
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setGoInputText(e.target.value);
   };
 
-  handleBlur = (e: React.FocusEvent<HTMLInputElement, Element>) => {
-    const { goButton, quickGo, rootPrefixCls } = this.props;
-    const { goInputText } = this.state;
+  const handleBlur = (e: React.FocusEvent<HTMLInputElement, Element>) => {
     if (goButton || goInputText === '') {
       return;
     }
-    this.setState({ goInputText: '' });
+    setGoInputText('');
     if (
       e.relatedTarget &&
       (e.relatedTarget.className.indexOf(`${rootPrefixCls}-item-link`) >= 0 ||
@@ -65,22 +77,20 @@ class Options extends React.Component<Props, State> {
     ) {
       return;
     }
-    quickGo(this.getValidValue());
+    quickGo?.(getValidValue());
   };
 
-  go = (e: any) => {
-    const { goInputText } = this.state;
+  const go = (e: any) => {
     if (goInputText === '') {
       return;
     }
     if (e.keyCode === KEYCODE.ENTER || e.type === 'click') {
-      this.setState({ goInputText: '' });
-      this.props.quickGo(this.getValidValue());
+      setGoInputText('');
+      quickGo?.(getValidValue());
     }
   };
 
-  getPageSizeOptions() {
-    const { pageSize, pageSizeOptions } = this.props;
+  const getPageSizeOptions = () => {
     if (
       pageSizeOptions.some(
         (option) => option.toString() === pageSize.toString(),
@@ -89,110 +99,94 @@ class Options extends React.Component<Props, State> {
       return pageSizeOptions;
     }
     return pageSizeOptions.concat([pageSize.toString()]).sort((a, b) => {
-      // eslint-disable-next-line no-restricted-globals
       const numberA = Number.isNaN(Number(a)) ? 0 : Number(a);
-      // eslint-disable-next-line no-restricted-globals
       const numberB = Number.isNaN(Number(b)) ? 0 : Number(b);
       return numberA - numberB;
     });
-  }
-
-  render() {
-    const {
-      pageSize,
-      locale,
-      rootPrefixCls,
-      changeSize,
-      quickGo,
-      goButton,
-      selectComponentClass,
-      buildOptionText,
-      selectPrefixCls,
-      disabled,
-    } = this.props;
-    const { goInputText } = this.state;
-    const prefixCls = `${rootPrefixCls}-options`;
-    const Select = selectComponentClass;
-    let changeSelect = null;
-    let goInput = null;
-    let gotoButton = null;
-
-    if (!changeSize && !quickGo) {
-      return null;
-    }
+  };
+  // ============== cls ==============
+  const prefixCls = `${rootPrefixCls}-options`;
 
-    const pageSizeOptions = this.getPageSizeOptions();
+  // ============== render ==============
 
-    if (changeSize && Select) {
-      const options = pageSizeOptions.map((opt, i) => (
-        <Select.Option key={i} value={opt.toString()}>
-          {(buildOptionText || this.buildOptionText)(opt)}
-        </Select.Option>
-      ));
+  if (!changeSize && !quickGo) {
+    return null;
+  }
 
-      changeSelect = (
-        <Select
-          disabled={disabled}
-          prefixCls={selectPrefixCls}
-          showSearch={false}
-          className={`${prefixCls}-size-changer`}
-          optionLabelProp="children"
-          popupMatchSelectWidth={false}
-          value={(pageSize || pageSizeOptions[0]).toString()}
-          onChange={this.changeSize}
-          getPopupContainer={(triggerNode) => triggerNode.parentNode}
-          aria-label={locale.page_size}
-          defaultOpen={false}
-        >
-          {options}
-        </Select>
-      );
-    }
+  let changeSelect = null;
+  let goInput = null;
+  let gotoButton = null;
+
+  if (changeSize && Select) {
+    const options = getPageSizeOptions().map((opt, i) => (
+      <Select.Option key={i} value={opt.toString()}>
+        {mergeBuildOptionText(opt)}
+      </Select.Option>
+    ));
+
+    changeSelect = (
+      <Select
+        disabled={disabled}
+        prefixCls={selectPrefixCls}
+        showSearch={false}
+        className={`${prefixCls}-size-changer`}
+        optionLabelProp="children"
+        popupMatchSelectWidth={false}
+        value={(pageSize || pageSizeOptions[0]).toString()}
+        onChange={changeSizeHandle}
+        getPopupContainer={(triggerNode) => triggerNode.parentNode}
+        aria-label={locale.page_size}
+        defaultOpen={false}
+      >
+        {options}
+      </Select>
+    );
+  }
 
-    if (quickGo) {
-      if (goButton) {
-        gotoButton =
-          typeof goButton === 'boolean' ? (
-            <button
-              type="button"
-              onClick={this.go}
-              onKeyUp={this.go}
-              disabled={disabled}
-              className={`${prefixCls}-quick-jumper-button`}
-            >
-              {locale.jump_to_confirm}
-            </button>
-          ) : (
-            <span onClick={this.go} onKeyUp={this.go}>
-              {goButton}
-            </span>
-          );
-      }
-      goInput = (
-        <div className={`${prefixCls}-quick-jumper`}>
-          {locale.jump_to}
-          <input
+  if (quickGo) {
+    if (goButton) {
+      gotoButton =
+        typeof goButton === 'boolean' ? (
+          <button
+            type="button"
+            onClick={go}
+            onKeyUp={go}
             disabled={disabled}
-            type="text"
-            value={goInputText}
-            onChange={this.handleChange}
-            onKeyUp={this.go}
-            onBlur={this.handleBlur}
-            aria-label={locale.page}
-          />
-          {locale.page}
-          {gotoButton}
-        </div>
-      );
+            className={`${prefixCls}-quick-jumper-button`}
+          >
+            {locale.jump_to_confirm}
+          </button>
+        ) : (
+          <span onClick={go} onKeyUp={go}>
+            {goButton}
+          </span>
+        );
     }
 
-    return (
-      <li className={`${prefixCls}`}>
-        {changeSelect}
-        {goInput}
-      </li>
+    goInput = (
+      <div className={`${prefixCls}-quick-jumper`}>
+        {locale.jump_to}
+        <input
+          disabled={disabled}
+          type="text"
+          value={goInputText}
+          onChange={handleChange}
+          onKeyUp={go}
+          onBlur={handleBlur}
+          aria-label={locale.page}
+        />
+        {locale.page}
+        {gotoButton}
+      </div>
     );
   }
+
+  return (
+    <li className={prefixCls}>
+      {changeSelect}
+      {goInput}
+    </li>
+  );
 }
 
 export default Options;
diff --git a/src/Pager.tsx b/src/Pager.tsx
index 2755d919..41d2e2b2 100644
--- a/src/Pager.tsx
+++ b/src/Pager.tsx
@@ -1,10 +1,9 @@
 /* eslint react/prop-types: 0 */
 import classNames from 'classnames';
 import React from 'react';
+import type { PaginationProps } from './interface';
 
-interface Props {
-  last?: boolean;
-  locale?: any;
+export interface PagerProps extends Pick<PaginationProps, 'itemRender'> {
   rootPrefixCls: string;
   page: number;
   active?: boolean;
@@ -13,17 +12,12 @@ interface Props {
   onClick?: (page: number) => void;
   onKeyPress?: (
     e: React.KeyboardEvent<HTMLLIElement>,
-    onClick: Props['onClick'],
-    page: Props['page'],
+    onClick: PagerProps['onClick'],
+    page: PagerProps['page'],
   ) => void;
-  itemRender?: (
-    page: number,
-    type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next',
-    element: React.ReactNode,
-  ) => React.ReactNode;
 }
 
-const Pager: React.FC<Props> = (props) => {
+const Pager: React.FC<PagerProps> = (props) => {
   const {
     rootPrefixCls,
     page,
@@ -35,11 +29,16 @@ const Pager: React.FC<Props> = (props) => {
     itemRender,
   } = props;
   const prefixCls = `${rootPrefixCls}-item`;
-  const cls = classNames(prefixCls, `${prefixCls}-${page}`, {
-    [`${prefixCls}-active`]: active,
-    [`${prefixCls}-disabled`]: !page,
-    [props.className]: className,
-  });
+
+  const cls = classNames(
+    prefixCls,
+    `${prefixCls}-${page}`,
+    {
+      [`${prefixCls}-active`]: active,
+      [`${prefixCls}-disabled`]: !page,
+    },
+    className,
+  );
 
   const handleClick = () => {
     onClick(page);
@@ -50,19 +49,18 @@ const Pager: React.FC<Props> = (props) => {
   };
 
   const pager = itemRender(page, 'page', <a rel="nofollow">{page}</a>);
-  if (!pager) return null;
 
-  return (
+  return pager ? (
     <li
-      title={showTitle ? page.toString() : null}
+      title={showTitle ? String(page) : null}
       className={cls}
       onClick={handleClick}
-      onKeyPress={handleKeyPress}
+      onKeyDown={handleKeyPress}
       tabIndex={0}
     >
       {pager}
     </li>
-  );
+  ) : null;
 };
 
 export default Pager;
diff --git a/src/Pagination.tsx b/src/Pagination.tsx
index 8175b2af..f4ad1a4b 100644
--- a/src/Pagination.tsx
+++ b/src/Pagination.tsx
@@ -1,84 +1,26 @@
 import classNames from 'classnames';
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import KeyCode from 'rc-util/lib/KeyCode';
 import pickAttrs from 'rc-util/lib/pickAttrs';
-import React, { cloneElement, isValidElement } from 'react';
-import KEYCODE from './KeyCode';
-import LOCALE from './locale/zh_CN';
+import warning from 'rc-util/lib/warning';
+import React from 'react';
+import type { PaginationProps } from './interface';
+import zhCN from './locale/zh_CN';
 import Options from './Options';
+import type { PagerProps } from './Pager';
 import Pager from './Pager';
 
-export interface PaginationLocale {
-  // Options.jsx
-  items_per_page?: string;
-  jump_to?: string;
-  jump_to_confirm?: string;
-  page?: string;
-
-  // Pagination.jsx
-  prev_page?: string;
-  next_page?: string;
-  prev_5?: string;
-  next_5?: string;
-  prev_3?: string;
-  next_3?: string;
-}
-
-export interface PaginationData {
-  className: string;
-  selectPrefixCls: string;
-  prefixCls: string;
-  pageSizeOptions: string[] | number[];
-
-  current: number;
-  defaultCurrent: number;
-  total: number;
-  totalBoundaryShowSizeChanger?: number;
-  pageSize: number;
-  defaultPageSize: number;
-
-  hideOnSinglePage: boolean;
-  showSizeChanger: boolean;
-  showLessItems: boolean;
-  showPrevNextJumpers: boolean;
-  showQuickJumper: boolean | object;
-  showTitle: boolean;
-  simple: boolean;
-  disabled: boolean;
-
-  locale: PaginationLocale;
-
-  style: React.CSSProperties;
-
-  selectComponentClass: React.ComponentType;
-  prevIcon: React.ComponentType | React.ReactNode;
-  nextIcon: React.ComponentType | React.ReactNode;
-  jumpPrevIcon: React.ComponentType | React.ReactNode;
-  jumpNextIcon: React.ComponentType | React.ReactNode;
-}
-
-export interface PaginationProps extends Partial<PaginationData> {
-  onChange?: (page: number, pageSize: number) => void;
-  onShowSizeChange?: (current: number, size: number) => void;
-  itemRender?: (
-    page: number,
-    type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next',
-    element: React.ReactNode,
-  ) => React.ReactNode;
-  showTotal?: (total: number, range: [number, number]) => React.ReactNode;
-}
-
-interface PaginationState {
-  current: number;
-  currentInputValue: number;
-  pageSize: number;
-}
+const defaultItemRender: PaginationProps['itemRender'] = (
+  page,
+  type,
+  element,
+) => element;
 
-function noop() {
-}
+function noop() {}
 
 function isInteger(v: number) {
   const value = Number(v);
   return (
-    // eslint-disable-next-line no-restricted-globals
     typeof value === 'number' &&
     !Number.isNaN(value) &&
     isFinite(value) &&
@@ -86,140 +28,87 @@ function isInteger(v: number) {
   );
 }
 
-const defaultItemRender: PaginationProps['itemRender'] = (
-  page,
-  type,
-  element,
-) => {
-  return element;
-};
-
-function calculatePage(
-  p: number | undefined,
-  state: PaginationState,
-  props: PaginationProps,
-) {
-  const pageSize = typeof p === 'undefined' ? state.pageSize : p;
-  return Math.floor((props.total - 1) / pageSize) + 1;
+function calculatePage(p: number | undefined, pageSize: number, total: number) {
+  const _pageSize = typeof p === 'undefined' ? pageSize : p;
+  return Math.floor((total - 1) / _pageSize) + 1;
 }
 
-class Pagination extends React.Component<PaginationProps, PaginationState> {
-  static defaultProps = {
-    defaultCurrent: 1,
-    total: 0,
-    defaultPageSize: 10,
-    onChange: noop,
-    className: '',
-    selectPrefixCls: 'rc-select',
-    prefixCls: 'rc-pagination',
-    selectComponentClass: null,
-    hideOnSinglePage: false,
-    showPrevNextJumpers: true,
-    showQuickJumper: false,
-    showLessItems: false,
-    showTitle: true,
-    onShowSizeChange: noop,
-    locale: LOCALE,
-    style: {},
-    itemRender: defaultItemRender,
-    totalBoundaryShowSizeChanger: 50,
-  };
-  paginationNode = React.createRef<HTMLUListElement>();
-
-  constructor(props: PaginationProps) {
-    super(props);
-
-    const hasOnChange = props.onChange !== noop;
-    const hasCurrent = 'current' in props;
-    if (hasCurrent && !hasOnChange) {
-      // eslint-disable-next-line no-console
-      console.warn(
-        'Warning: You provided a `current` prop to a Pagination component without an `onChange` handler. This will render a read-only component.',
-      );
-    }
-
-    let current = props.defaultCurrent;
-    if ('current' in props) {
-      // eslint-disable-next-line prefer-destructuring
-      current = props.current;
-    }
-
-    let pageSize = props.defaultPageSize;
-    if ('pageSize' in props) {
-      // eslint-disable-next-line prefer-destructuring
-      pageSize = props.pageSize;
-    }
-
-    current = Math.min(current, calculatePage(pageSize, undefined, props));
-
-    this.state = {
-      current,
-      currentInputValue: current,
-      pageSize,
-    };
-  }
-
-  componentDidUpdate(_: PaginationProps, prevState: PaginationState) {
-    // When current page change, fix focused style of prev item
-    // A hacky solution of https://github.com/ant-design/ant-design/issues/8948
-    const { prefixCls } = this.props;
-    if (
-      prevState.current !== this.state.current &&
-      this.paginationNode.current
-    ) {
-      const lastCurrentNode =
-        this.paginationNode.current.querySelector<HTMLInputElement>(
-          `.${prefixCls}-item-${prevState.current}`,
-        );
-      if (lastCurrentNode && document.activeElement === lastCurrentNode) {
-        lastCurrentNode?.blur?.();
-      }
-    }
-  }
-
-  static getDerivedStateFromProps(
-    props: PaginationProps,
-    prevState: PaginationState,
-  ) {
-    const newState: Partial<PaginationState> = {};
-
-    if ('current' in props) {
-      newState.current = props.current;
-
-      if (props.current !== prevState.current) {
-        newState.currentInputValue = newState.current;
-      }
-    }
-
-    if ('pageSize' in props && props.pageSize !== prevState.pageSize) {
-      let { current } = prevState;
-      const newCurrent = calculatePage(props.pageSize, prevState, props);
-      current = current > newCurrent ? newCurrent : current;
-
-      if (!('current' in props)) {
-        newState.current = current;
-        newState.currentInputValue = current;
-      }
-      newState.pageSize = props.pageSize;
-    }
-
-    return newState;
+function Pagination(props: PaginationProps) {
+  const {
+    // cls
+    prefixCls = 'rc-pagination',
+    selectPrefixCls = 'rc-select',
+    className,
+    selectComponentClass,
+
+    // control
+    current: currentProp,
+    defaultCurrent = 1,
+    total = 0,
+    pageSize: pageSizeProp,
+    defaultPageSize = 10,
+    onChange = noop,
+
+    // config
+    hideOnSinglePage,
+    showPrevNextJumpers = true,
+    showQuickJumper,
+    showLessItems,
+    showTitle = true,
+    onShowSizeChange = noop,
+    locale = zhCN,
+    style,
+    totalBoundaryShowSizeChanger = 50,
+    disabled,
+    simple,
+    showTotal,
+    showSizeChanger: showSizeChangerProp,
+    pageSizeOptions,
+
+    // render
+    itemRender = defaultItemRender,
+    jumpPrevIcon,
+    jumpNextIcon,
+    prevIcon,
+    nextIcon,
+  } = props;
+
+  const paginationRef = React.useRef<HTMLUListElement>(null);
+
+  const [pageSize, setPageSize] = useMergedState<number>(10, {
+    value: pageSizeProp,
+    defaultValue: defaultPageSize,
+  });
+
+  const [current, setCurrent] = useMergedState<number>(1, {
+    value: currentProp,
+    defaultValue: defaultCurrent,
+    postState: (c) =>
+      Math.max(1, Math.min(c, calculatePage(undefined, pageSize, total))),
+  });
+
+  const [internalInputVal, setInternalInputVal] = React.useState(current);
+
+  const hasOnChange = onChange !== noop;
+  const hasCurrent = 'current' in props;
+
+  if (process.env.NODE_ENV !== 'production') {
+    warning(
+      hasCurrent ? hasOnChange : true,
+      'You provided a `current` prop to a Pagination component without an `onChange` handler. This will render a read-only component.',
+    );
   }
 
-  getJumpPrevPage = () =>
-    Math.max(1, this.state.current - (this.props.showLessItems ? 3 : 5));
-
-  getJumpNextPage = () =>
-    Math.min(
-      calculatePage(undefined, this.state, this.props),
-      this.state.current + (this.props.showLessItems ? 3 : 5),
-    );
+  const jumpPrevPage = Math.max(1, current - (showLessItems ? 3 : 5));
+  const jumpNextPage = Math.min(
+    calculatePage(undefined, pageSize, total),
+    current + (showLessItems ? 3 : 5),
+  );
 
-  getItemIcon = (
+  function getItemIcon(
     icon: React.ReactNode | React.ComponentType<PaginationProps>,
     label: string,
-  ) => {
-    const { prefixCls } = this.props;
+  ) {
     let iconNode = icon || (
       <button
         type="button"
@@ -228,21 +117,19 @@ class Pagination extends React.Component<PaginationProps, PaginationState> {
       />
     );
     if (typeof icon === 'function') {
-      iconNode = React.createElement(icon, { ...this.props });
+      iconNode = React.createElement(icon, { ...props });
     }
     return iconNode as React.ReactNode;
-  };
+  }
 
-  getValidValue(e: any): number {
+  function getValidValue(e: any): number {
     const inputValue = e.target.value;
-    const allPages = calculatePage(undefined, this.state, this.props);
-    const { currentInputValue } = this.state;
+    const allPages = calculatePage(undefined, pageSize, total);
     let value: number;
     if (inputValue === '') {
       value = inputValue;
-      // eslint-disable-next-line no-restricted-globals
     } else if (Number.isNaN(Number(inputValue))) {
-      value = currentInputValue;
+      value = internalInputVal;
     } else if (inputValue >= allPages) {
       value = allPages;
     } else {
@@ -251,578 +138,442 @@ class Pagination extends React.Component<PaginationProps, PaginationState> {
     return value;
   }
 
-  isValid = (page: number) => {
-    const { total } = this.props;
-    return (
-      isInteger(page) &&
-      page !== this.state.current &&
-      isInteger(total) &&
-      total > 0
-    );
-  };
+  function isValid(page: number) {
+    return isInteger(page) && page !== current && isInteger(total) && total > 0;
+  }
 
-  shouldDisplayQuickJumper = () => {
-    const { showQuickJumper, total } = this.props;
-    const { pageSize } = this.state;
-    if (total <= pageSize) {
-      return false;
-    }
-    return showQuickJumper;
-  };
+  const shouldDisplayQuickJumper = total > pageSize ? showQuickJumper : false;
 
-  handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.keyCode === KEYCODE.ARROW_UP || e.keyCode === KEYCODE.ARROW_DOWN) {
-      e.preventDefault();
+  /**
+   * prevent "up arrow" key reseting cursor position within textbox
+   * @see https://stackoverflow.com/a/1081114
+   */
+  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+    if (event.keyCode === KeyCode.UP || event.keyCode === KeyCode.DOWN) {
+      event.preventDefault();
     }
-  };
+  }
 
-  handleKeyUp = (
-    e:
+  function handleKeyUp(
+    event:
       | React.KeyboardEvent<HTMLInputElement>
       | React.ChangeEvent<HTMLInputElement>,
-  ) => {
-    const value = this.getValidValue(e);
-    const { currentInputValue } = this.state;
-    if (value !== currentInputValue) {
-      this.setState({ currentInputValue: value });
-    }
-    if (
-      (e as React.KeyboardEvent<HTMLInputElement>).keyCode === KEYCODE.ENTER
-    ) {
-      this.handleChange(value);
-    } else if (
-      (e as React.KeyboardEvent<HTMLInputElement>).keyCode === KEYCODE.ARROW_UP
-    ) {
-      this.handleChange(value - 1);
-    } else if (
-      (e as React.KeyboardEvent<HTMLInputElement>).keyCode ===
-      KEYCODE.ARROW_DOWN
-    ) {
-      this.handleChange(value + 1);
+  ) {
+    const value = getValidValue(event);
+    if (value !== internalInputVal) {
+      setInternalInputVal(value);
     }
-  };
-
-  handleBlur = (e: React.FocusEvent<HTMLInputElement, Element>) => {
-    const value = this.getValidValue(e);
-    this.handleChange(value);
-  };
 
-  changePageSize = (size: number) => {
-    let { current } = this.state;
-    const newCurrent = calculatePage(size, this.state, this.props);
-    current = current > newCurrent ? newCurrent : current;
-    // fix the issue:
-    // Once 'total' is 0, 'current' in 'onShowSizeChange' is 0, which is not correct.
-    if (newCurrent === 0) {
-      // eslint-disable-next-line prefer-destructuring
-      current = this.state.current;
+    switch ((event as React.KeyboardEvent<HTMLInputElement>).keyCode) {
+      case KeyCode.ENTER:
+        handleChange(value);
+        break;
+      case KeyCode.UP:
+        handleChange(value - 1);
+        break;
+      case KeyCode.DOWN:
+        handleChange(value + 1);
+        break;
+      default:
+        break;
     }
+  }
 
-    if (typeof size === 'number') {
-      if (!('pageSize' in this.props)) {
-        this.setState({ pageSize: size });
-      }
-      if (!('current' in this.props)) {
-        this.setState({ current, currentInputValue: current });
-      }
-    }
+  function handleBlur(event: React.FocusEvent<HTMLInputElement, Element>) {
+    handleChange(getValidValue(event));
+  }
 
-    this.props.onShowSizeChange(current, size);
+  function changePageSize(size: number) {
+    const newCurrent = calculatePage(size, pageSize, total);
+    const nextCurrent =
+      current > newCurrent && newCurrent !== 0 ? newCurrent : current;
 
-    if ('onChange' in this.props && this.props.onChange) {
-      this.props.onChange(current, size);
-    }
-  };
+    setPageSize(size);
+    setInternalInputVal(nextCurrent);
+    onShowSizeChange?.(current, size);
+    setCurrent(nextCurrent);
+    onChange?.(nextCurrent, size);
+  }
 
-  handleChange = (page: number) => {
-    const { disabled, onChange } = this.props;
-    const { pageSize, current, currentInputValue } = this.state;
-    if (this.isValid(page) && !disabled) {
-      const currentPage = calculatePage(undefined, this.state, this.props);
+  function handleChange(page: number) {
+    if (isValid(page) && !disabled) {
+      const currentPage = calculatePage(undefined, pageSize, total);
       let newPage = page;
       if (page > currentPage) {
         newPage = currentPage;
       } else if (page < 1) {
         newPage = 1;
       }
-      if (!('current' in this.props)) {
-        this.setState({ current: newPage });
-      }
-      if (newPage !== currentInputValue) {
-        this.setState({ currentInputValue: newPage });
+
+      if (newPage !== internalInputVal) {
+        setInternalInputVal(newPage);
       }
-      onChange(newPage, pageSize);
-      return newPage;
-    }
-    return current;
-  };
 
-  prev = () => {
-    if (this.hasPrev()) {
-      this.handleChange(this.state.current - 1);
-    }
-  };
+      setCurrent(newPage);
+      onChange?.(newPage, pageSize);
 
-  next = () => {
-    if (this.hasNext()) {
-      this.handleChange(this.state.current + 1);
+      return newPage;
     }
-  };
 
-  jumpPrev = () => {
-    this.handleChange(this.getJumpPrevPage());
-  };
+    return current;
+  }
 
-  jumpNext = () => {
-    this.handleChange(this.getJumpNextPage());
-  };
+  const hasPrev = current > 1;
+  const hasNext = current < calculatePage(undefined, pageSize, total);
+  const showSizeChanger =
+    showSizeChangerProp ?? total > totalBoundaryShowSizeChanger;
+
+  function prevHandle() {
+    if (hasPrev) handleChange(current - 1);
+  }
 
-  hasPrev = () => this.state.current > 1;
+  function nextHandle() {
+    if (hasNext) handleChange(current + 1);
+  }
 
-  hasNext = () =>
-    this.state.current < calculatePage(undefined, this.state, this.props);
+  function jumpPrevHandle() {
+    handleChange(jumpPrevPage);
+  }
 
-  getShowSizeChanger() {
-    const { showSizeChanger, total, totalBoundaryShowSizeChanger } = this.props;
-    if (typeof showSizeChanger !== 'undefined') {
-      return showSizeChanger;
-    }
-    return total > totalBoundaryShowSizeChanger;
+  function jumpNextHandle() {
+    handleChange(jumpNextPage);
   }
 
-  runIfEnter = (event, callback, ...restParams) => {
-    if (event.key === 'Enter' || event.charCode === 13) {
+  function runIfEnter(
+    event: React.KeyboardEvent<HTMLLIElement>,
+    callback,
+    ...restParams
+  ) {
+    if (
+      event.key === 'Enter' ||
+      event.charCode === KeyCode.ENTER ||
+      event.keyCode === KeyCode.ENTER
+    ) {
       callback(...restParams);
     }
-  };
-
-  runIfEnterPrev = (e: React.KeyboardEvent<HTMLLIElement>) => {
-    this.runIfEnter(e, this.prev);
-  };
+  }
 
-  runIfEnterNext = (e: React.KeyboardEvent<HTMLLIElement>) => {
-    this.runIfEnter(e, this.next);
-  };
+  function runIfEnterPrev(event: React.KeyboardEvent<HTMLLIElement>) {
+    runIfEnter(event, prevHandle);
+  }
 
-  runIfEnterJumpPrev = (e: React.KeyboardEvent<HTMLLIElement>) => {
-    this.runIfEnter(e, this.jumpPrev);
-  };
+  function runIfEnterNext(event: React.KeyboardEvent<HTMLLIElement>) {
+    runIfEnter(event, nextHandle);
+  }
 
-  runIfEnterJumpNext = (e: React.KeyboardEvent<HTMLLIElement>) => {
-    this.runIfEnter(e, this.jumpNext);
-  };
+  function runIfEnterJumpPrev(event: React.KeyboardEvent<HTMLLIElement>) {
+    runIfEnter(event, jumpPrevHandle);
+  }
 
-  handleGoTO = (e: any) => {
-    if (e.keyCode === KEYCODE.ENTER || e.type === 'click') {
-      this.handleChange(this.state.currentInputValue);
-    }
-  };
+  function runIfEnterJumpNext(event: React.KeyboardEvent<HTMLLIElement>) {
+    runIfEnter(event, jumpNextHandle);
+  }
 
-  renderPrev = (prevPage: number) => {
-    const { prevIcon, itemRender } = this.props;
+  function renderPrev(prevPage: number) {
     const prevButton = itemRender(
       prevPage,
       'prev',
-      this.getItemIcon(prevIcon, 'prev page'),
+      getItemIcon(prevIcon, 'prev page'),
     );
-    const disabled = !this.hasPrev();
-    return isValidElement(prevButton)
-      ? cloneElement<any>(prevButton, { disabled })
+    return React.isValidElement(prevButton)
+      ? React.cloneElement<any>(prevButton, { disabled: !hasPrev })
       : prevButton;
-  };
+  }
 
-  renderNext = (nextPage: number) => {
-    const { nextIcon, itemRender } = this.props;
+  function renderNext(nextPage: number) {
     const nextButton = itemRender(
       nextPage,
       'next',
-      this.getItemIcon(nextIcon, 'next page'),
+      getItemIcon(nextIcon, 'next page'),
     );
-    const disabled = !this.hasNext();
-    return isValidElement(nextButton)
-      ? cloneElement<any>(nextButton, { disabled })
+    return React.isValidElement(nextButton)
+      ? React.cloneElement<any>(nextButton, { disabled: !hasNext })
       : nextButton;
-  };
+  }
 
-  render() {
-    const {
-      prefixCls,
-      className,
-      style,
-      disabled,
-      hideOnSinglePage,
-      total,
-      locale,
-      showQuickJumper,
-      showLessItems,
-      showTitle,
-      showTotal,
-      simple,
-      itemRender,
-      showPrevNextJumpers,
-      jumpPrevIcon,
-      jumpNextIcon,
-      selectComponentClass,
-      selectPrefixCls,
-      pageSizeOptions,
-    } = this.props;
-
-    const { current, pageSize, currentInputValue } = this.state;
-
-    // When hideOnSinglePage is true and there is only 1 page, hide the pager
-    if (hideOnSinglePage === true && total <= pageSize) {
-      return null;
+  function handleGoTO(event: any) {
+    if (event.type === 'click' || event.keyCode === KeyCode.ENTER) {
+      handleChange(internalInputVal);
     }
+  }
 
-    const allPages = calculatePage(undefined, this.state, this.props);
-    const pagerList = [];
-    let jumpPrev = null;
-    let jumpNext = null;
-    let firstPager = null;
-    let lastPager = null;
-    let gotoButton = null;
-
-    const goButton = showQuickJumper && (showQuickJumper as any).goButton;
-    const pageBufferSize = showLessItems ? 1 : 2;
-
-    const prevPage = current - 1 > 0 ? current - 1 : 0;
-    const nextPage = current + 1 < allPages ? current + 1 : allPages;
-
-    const dataOrAriaAttributeProps = pickAttrs(this.props, {
-      aria: true,
-      data: true,
-    });
-
-    const totalText = showTotal && (
-      <li className={`${prefixCls}-total-text`}>
-        {showTotal(total, [
-          total === 0 ? 0 : (current - 1) * pageSize + 1,
-          current * pageSize > total ? total : current * pageSize,
-        ])}
-      </li>
-    );
+  let jumpPrev: React.ReactElement = null;
 
-    if (simple) {
-      if (goButton) {
-        if (typeof goButton === 'boolean') {
-          gotoButton = (
-            <button
-              type="button"
-              onClick={this.handleGoTO}
-              onKeyUp={this.handleGoTO}
-            >
-              {locale.jump_to_confirm}
-            </button>
-          );
-        } else {
-          gotoButton = (
-            <span onClick={this.handleGoTO} onKeyUp={this.handleGoTO}>
-              {goButton}
-            </span>
-          );
-        }
-        gotoButton = (
-          <li
-            title={showTitle ? `${locale.jump_to}${current}/${allPages}` : null}
-            className={`${prefixCls}-simple-pager`}
-          >
-            {gotoButton}
-          </li>
-        );
-      }
+  const dataOrAriaAttributeProps = pickAttrs(props, {
+    aria: true,
+    data: true,
+  });
 
-      const prev = this.renderPrev(prevPage);
-      return (
-        <ul
-          className={classNames(
-            prefixCls,
-            `${prefixCls}-simple`,
-            { [`${prefixCls}-disabled`]: disabled },
-            className,
-          )}
-          style={style}
-          ref={this.paginationNode}
-          {...dataOrAriaAttributeProps}
-        >
-          {totalText}
-          {
-            prev ? (
-              <li
-                title={showTitle ? locale.prev_page : null}
-                onClick={this.prev}
-                tabIndex={this.hasPrev() ? 0 : null}
-                onKeyPress={this.runIfEnterPrev}
-                className={classNames(`${prefixCls}-prev`, {
-                  [`${prefixCls}-disabled`]: !this.hasPrev(),
-                })}
-                aria-disabled={!this.hasPrev()}
-              >
-                {prev}
-              </li>
-            ) : null
-          }
-          <li
-            title={showTitle ? `${current}/${allPages}` : null}
-            className={`${prefixCls}-simple-pager`}
-          >
-            <input
-              type="text"
-              value={currentInputValue}
-              disabled={disabled}
-              onKeyDown={this.handleKeyDown}
-              onKeyUp={this.handleKeyUp}
-              onChange={this.handleKeyUp}
-              onBlur={this.handleBlur}
-              size={3}
-            />
-            <span className={`${prefixCls}-slash`}>/</span>
-            {allPages}
-          </li>
-          <li
-            title={showTitle ? locale.next_page : null}
-            onClick={this.next}
-            tabIndex={this.hasPrev() ? 0 : null}
-            onKeyPress={this.runIfEnterNext}
-            className={classNames(`${prefixCls}-next`, {
-              [`${prefixCls}-disabled`]: !this.hasNext(),
-            })}
-            aria-disabled={!this.hasNext()}
-          >
-            {this.renderNext(nextPage)}
-          </li>
-          <Options
-            disabled={disabled}
-            locale={locale}
-            rootPrefixCls={prefixCls}
-            selectComponentClass={selectComponentClass}
-            selectPrefixCls={selectPrefixCls}
-            changeSize={this.getShowSizeChanger() ? this.changePageSize : null}
-            current={current}
-            pageSize={pageSize}
-            pageSizeOptions={pageSizeOptions}
-            quickGo={this.shouldDisplayQuickJumper() ? this.handleChange : null}
-            goButton={gotoButton}
-          />
-        </ul>
+  const totalText = showTotal && (
+    <li className={`${prefixCls}-total-text`}>
+      {showTotal(total, [
+        total === 0 ? 0 : (current - 1) * pageSize + 1,
+        current * pageSize > total ? total : current * pageSize,
+      ])}
+    </li>
+  );
+
+  let jumpNext: React.ReactElement = null;
+
+  const allPages = calculatePage(undefined, pageSize, total);
+
+  // ================== Render ==================
+  // When hideOnSinglePage is true and there is only 1 page, hide the pager
+  if (hideOnSinglePage && total <= pageSize) {
+    return null;
+  }
+
+  const pagerList: React.ReactElement[] = [];
+  const pagerProps: PagerProps = {
+    rootPrefixCls: prefixCls,
+    onClick: handleChange,
+    onKeyPress: runIfEnter,
+    showTitle,
+    itemRender,
+    page: -1,
+  };
+
+  const prevPage = current - 1 > 0 ? current - 1 : 0;
+  const nextPage = current + 1 < allPages ? current + 1 : allPages;
+  const goButton = showQuickJumper && (showQuickJumper as any).goButton;
+
+  // ================== Simple ==================
+  // FIXME: ts type
+  let gotoButton: any = goButton;
+  let simplePager: React.ReactNode = null;
+
+  if (simple) {
+    if (typeof goButton === 'boolean') {
+      gotoButton = (
+        <button type="button" onClick={handleGoTO} onKeyUp={handleGoTO}>
+          {locale.jump_to_confirm}
+        </button>
       );
+    } else {
+      <span onClick={handleGoTO} onKeyUp={handleGoTO}>
+        {goButton}
+      </span>;
     }
 
-    if (allPages <= 3 + pageBufferSize * 2) {
-      const pagerProps = {
-        locale,
-        rootPrefixCls: prefixCls,
-        onClick: this.handleChange,
-        onKeyPress: this.runIfEnter,
-        showTitle,
-        itemRender,
-      };
-      if (!allPages) {
-        pagerList.push(
-          <Pager
-            {...pagerProps}
-            key="noPager"
-            page={1}
-            className={`${prefixCls}-item-disabled`}
-          />,
-        );
-      }
-      for (let i = 1; i <= allPages; i += 1) {
-        const active = current === i;
-        pagerList.push(
-          <Pager {...pagerProps} key={i} page={i} active={active} />,
-        );
-      }
-    } else {
-      const prevItemTitle = showLessItems ? locale.prev_3 : locale.prev_5;
-      const nextItemTitle = showLessItems ? locale.next_3 : locale.next_5;
+    gotoButton = (
+      <li
+        title={showTitle ? `${locale.jump_to}${current}/${allPages}` : null}
+        className={`${prefixCls}-simple-pager`}
+      >
+        {gotoButton}
+      </li>
+    );
 
-      const jumpPrevContent = itemRender(
-        this.getJumpPrevPage(),
-        'jump-prev',
-        this.getItemIcon(jumpPrevIcon, 'prev page'),
-      );
-      const jumpNextContent = itemRender(
-        this.getJumpNextPage(),
-        'jump-next',
-        this.getItemIcon(jumpNextIcon, 'next page'),
-      );
-      if (showPrevNextJumpers) {
-        jumpPrev = (
-          jumpPrevContent ? <li
-            title={showTitle ? prevItemTitle : null}
-            key="prev"
-            onClick={this.jumpPrev}
-            tabIndex={0}
-            onKeyPress={this.runIfEnterJumpPrev}
-            className={classNames(`${prefixCls}-jump-prev`, {
-              [`${prefixCls}-jump-prev-custom-icon`]: !!jumpPrevIcon,
-            })}
-          >
-            {jumpPrevContent}
-          </li> : null
-        );
-        jumpNext = (
-          jumpNextContent ? <li
-            title={showTitle ? nextItemTitle : null}
-            key="next"
-            tabIndex={0}
-            onClick={this.jumpNext}
-            onKeyPress={this.runIfEnterJumpNext}
-            className={classNames(`${prefixCls}-jump-next`, {
-              [`${prefixCls}-jump-next-custom-icon`]: !!jumpNextIcon,
-            })}
-          >
-            {jumpNextContent}
-          </li> : null
-        );
-      }
-      lastPager = (
-        <Pager
-          locale={locale}
-          last
-          rootPrefixCls={prefixCls}
-          onClick={this.handleChange}
-          onKeyPress={this.runIfEnter}
-          key={allPages}
-          page={allPages}
-          active={false}
-          showTitle={showTitle}
-          itemRender={itemRender}
+    simplePager = (
+      <li
+        title={showTitle ? `${current}/${allPages}` : null}
+        className={`${prefixCls}-simple-pager`}
+      >
+        <input
+          type="text"
+          value={internalInputVal}
+          disabled={disabled}
+          onKeyDown={handleKeyDown}
+          onKeyUp={handleKeyUp}
+          onChange={handleKeyUp}
+          onBlur={handleBlur}
+          size={3}
         />
-      );
-      firstPager = (
+        <span className={`${prefixCls}-slash`}>/</span>
+        {allPages}
+      </li>
+    );
+  }
+
+  // ====================== Normal ======================
+  const pageBufferSize = showLessItems ? 1 : 2;
+  if (allPages <= 3 + pageBufferSize * 2) {
+    if (!allPages) {
+      pagerList.push(
         <Pager
-          locale={locale}
-          rootPrefixCls={prefixCls}
-          onClick={this.handleChange}
-          onKeyPress={this.runIfEnter}
-          key={1}
+          {...pagerProps}
+          key="noPager"
           page={1}
-          active={false}
-          showTitle={showTitle}
-          itemRender={itemRender}
-        />
+          className={`${prefixCls}-item-disabled`}
+        />,
       );
+    }
 
-      let left = Math.max(1, current - pageBufferSize);
-      let right = Math.min(current + pageBufferSize, allPages);
+    for (let i = 1; i <= allPages; i += 1) {
+      pagerList.push(
+        <Pager {...pagerProps} key={i} page={i} active={current === i} />,
+      );
+    }
+  } else {
+    const prevItemTitle = showLessItems ? locale.prev_3 : locale.prev_5;
+    const nextItemTitle = showLessItems ? locale.next_3 : locale.next_5;
+
+    const jumpPrevContent = itemRender(
+      jumpPrevPage,
+      'jump-prev',
+      getItemIcon(jumpPrevIcon, 'prev page'),
+    );
+    const jumpNextContent = itemRender(
+      jumpNextPage,
+      'jump-next',
+      getItemIcon(jumpNextIcon, 'next page'),
+    );
 
-      if (current - 1 <= pageBufferSize) {
-        right = 1 + pageBufferSize * 2;
-      }
+    if (showPrevNextJumpers) {
+      jumpPrev = jumpPrevContent ? (
+        <li
+          title={showTitle ? prevItemTitle : null}
+          key="prev"
+          onClick={jumpPrevHandle}
+          tabIndex={0}
+          onKeyDown={runIfEnterJumpPrev}
+          className={classNames(`${prefixCls}-jump-prev`, {
+            [`${prefixCls}-jump-prev-custom-icon`]: !!jumpPrevIcon,
+          })}
+        >
+          {jumpPrevContent}
+        </li>
+      ) : null;
+
+      jumpNext = jumpNextContent ? (
+        <li
+          title={showTitle ? nextItemTitle : null}
+          key="next"
+          onClick={jumpNextHandle}
+          tabIndex={0}
+          onKeyDown={runIfEnterJumpNext}
+          className={classNames(`${prefixCls}-jump-next`, {
+            [`${prefixCls}-jump-next-custom-icon`]: !!jumpNextIcon,
+          })}
+        >
+          {jumpNextContent}
+        </li>
+      ) : null;
+    }
 
-      if (allPages - current <= pageBufferSize) {
-        left = allPages - pageBufferSize * 2;
-      }
+    let left = Math.max(1, current - pageBufferSize);
+    let right = Math.min(current + pageBufferSize, allPages);
 
-      for (let i = left; i <= right; i += 1) {
-        const active = current === i;
-        pagerList.push(
-          <Pager
-            locale={locale}
-            rootPrefixCls={prefixCls}
-            onClick={this.handleChange}
-            onKeyPress={this.runIfEnter}
-            key={i}
-            page={i}
-            active={active}
-            showTitle={showTitle}
-            itemRender={itemRender}
-          />,
-        );
-      }
+    if (current - 1 <= pageBufferSize) {
+      right = 1 + pageBufferSize * 2;
+    }
+    if (allPages - current <= pageBufferSize) {
+      left = allPages - pageBufferSize * 2;
+    }
 
-      if (current - 1 >= pageBufferSize * 2 && current !== 1 + 2) {
-        pagerList[0] = cloneElement(pagerList[0], {
-          className: `${prefixCls}-item-after-jump-prev`,
-        });
-        pagerList.unshift(jumpPrev);
-      }
-      if (
-        allPages - current >= pageBufferSize * 2 &&
-        current !== allPages - 2
-      ) {
-        pagerList[pagerList.length - 1] = cloneElement(
-          pagerList[pagerList.length - 1],
-          {
-            className: `${prefixCls}-item-before-jump-next`,
-          },
-        );
-        pagerList.push(jumpNext);
-      }
+    for (let i = left; i <= right; i += 1) {
+      pagerList.push(
+        <Pager {...pagerProps} key={i} page={i} active={current === i} />,
+      );
+    }
 
-      if (left !== 1) {
-        pagerList.unshift(firstPager);
-      }
-      if (right !== allPages) {
-        pagerList.push(lastPager);
-      }
+    if (current - 1 >= pageBufferSize * 2 && current !== 1 + 2) {
+      pagerList[0] = React.cloneElement(pagerList[0], {
+        className: classNames(
+          `${prefixCls}-item-after-jump-prev`,
+          pagerList[0].props.className,
+        ),
+      });
+
+      pagerList.unshift(jumpPrev);
+    }
+
+    if (allPages - current >= pageBufferSize * 2 && current !== allPages - 2) {
+      pagerList[pagerList.length - 1] = React.cloneElement(pagerList.at(-1), {
+        className: classNames(
+          `${prefixCls}-item-before-jump-next`,
+          pagerList.at(-1).props.className,
+        ),
+      });
+
+      pagerList.push(jumpNext);
     }
 
-    const prevDisabled = !this.hasPrev() || !allPages;
-    const nextDisabled = !this.hasNext() || !allPages;
+    if (left !== 1) {
+      pagerList.unshift(<Pager {...pagerProps} key={1} page={1} />);
+    }
+    if (right !== allPages) {
+      pagerList.push(<Pager {...pagerProps} key={allPages} page={allPages} />);
+    }
+  }
 
-    const prev = this.renderPrev(prevPage);
-    const next = this.renderNext(nextPage);
-    return (
-      <ul
-        className={classNames(prefixCls, className, {
-          [`${prefixCls}-disabled`]: disabled,
+  let prev = renderPrev(prevPage);
+  if (prev) {
+    const prevDisabled = !hasPrev || !allPages;
+    prev = (
+      <li
+        title={showTitle ? locale.prev_page : null}
+        onClick={prevHandle}
+        tabIndex={prevDisabled ? null : 0}
+        onKeyDown={runIfEnterPrev}
+        className={classNames(`${prefixCls}-prev`, {
+          [`${prefixCls}-disabled`]: prevDisabled,
         })}
-        style={style}
-        ref={this.paginationNode}
-        {...dataOrAriaAttributeProps}
+        aria-disabled={prevDisabled}
       >
-        {totalText}
-        {
-          prev ? (
-            <li
-              title={showTitle ? locale.prev_page : null}
-              onClick={this.prev}
-              tabIndex={prevDisabled ? null : 0}
-              onKeyPress={this.runIfEnterPrev}
-              className={classNames(`${prefixCls}-prev`, {
-                [`${prefixCls}-disabled`]: prevDisabled,
-              })}
-              aria-disabled={prevDisabled}
-            >
-              {prev}
-            </li>
-          ) : null
-        }
-        {pagerList}
-        {
-          next ? (
-            <li
-              title={showTitle ? locale.next_page : null}
-              onClick={this.next}
-              tabIndex={nextDisabled ? null : 0}
-              onKeyPress={this.runIfEnterNext}
-              className={classNames(`${prefixCls}-next`, {
-                [`${prefixCls}-disabled`]: nextDisabled,
-              })}
-              aria-disabled={nextDisabled}
-            >
-              {next}
-            </li>
-          ) : null
-        }
-        <Options
-          disabled={disabled}
-          locale={locale}
-          rootPrefixCls={prefixCls}
-          selectComponentClass={selectComponentClass}
-          selectPrefixCls={selectPrefixCls}
-          changeSize={this.getShowSizeChanger() ? this.changePageSize : null}
-          current={current}
-          pageSize={pageSize}
-          pageSizeOptions={pageSizeOptions}
-          quickGo={this.shouldDisplayQuickJumper() ? this.handleChange : null}
-          goButton={goButton}
-        />
-      </ul>
+        {prev}
+      </li>
+    );
+  }
+
+  let next = renderNext(nextPage);
+  if (next) {
+    let nextDisabled: boolean, nextTabIndex: number | null;
+
+    if (simple) {
+      nextDisabled = !hasNext;
+      nextTabIndex = hasPrev ? 0 : null;
+    } else {
+      nextDisabled = !hasNext || !allPages;
+      nextTabIndex = nextDisabled ? null : 0;
+    }
+
+    next = (
+      <li
+        title={showTitle ? locale.next_page : null}
+        onClick={nextHandle}
+        tabIndex={nextTabIndex}
+        onKeyDown={runIfEnterNext}
+        className={classNames(`${prefixCls}-next`, {
+          [`${prefixCls}-disabled`]: nextDisabled,
+        })}
+        aria-disabled={nextDisabled}
+      >
+        {next}
+      </li>
     );
   }
+
+  const cls = classNames(prefixCls, className, {
+    [`${prefixCls}-simple`]: simple,
+    [`${prefixCls}-disabled`]: disabled,
+  });
+
+  return (
+    <ul
+      className={cls}
+      style={style}
+      ref={paginationRef}
+      {...dataOrAriaAttributeProps}
+    >
+      {totalText}
+      {prev}
+      {simple ? simplePager : pagerList}
+      {next}
+      <Options
+        locale={locale}
+        rootPrefixCls={prefixCls}
+        disabled={disabled}
+        selectComponentClass={selectComponentClass}
+        selectPrefixCls={selectPrefixCls}
+        changeSize={showSizeChanger ? changePageSize : null}
+        pageSize={pageSize}
+        pageSizeOptions={pageSizeOptions}
+        quickGo={shouldDisplayQuickJumper ? handleChange : null}
+        goButton={gotoButton}
+      />
+    </ul>
+  );
 }
 
 export default Pagination;
diff --git a/src/index.ts b/src/index.ts
index eaef04eb..47bf73a1 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1 +1,2 @@
 export { default } from './Pagination';
+export type { PaginationProps } from './interface';
diff --git a/src/interface.ts b/src/interface.ts
new file mode 100644
index 00000000..56ec86c6
--- /dev/null
+++ b/src/interface.ts
@@ -0,0 +1,67 @@
+import type React from 'react';
+
+export interface PaginationLocale {
+  // Options
+  items_per_page?: string;
+  jump_to?: string;
+  jump_to_confirm?: string;
+  page?: string;
+
+  // Pagination
+  prev_page?: string;
+  next_page?: string;
+  prev_5?: string;
+  next_5?: string;
+  prev_3?: string;
+  next_3?: string;
+  page_size?: string;
+}
+
+export interface PaginationData {
+  className: string;
+  selectPrefixCls: string;
+  prefixCls: string;
+  pageSizeOptions: string[] | number[];
+
+  current: number;
+  defaultCurrent: number;
+  total: number;
+  totalBoundaryShowSizeChanger?: number;
+  pageSize: number;
+  defaultPageSize: number;
+
+  hideOnSinglePage: boolean;
+  showSizeChanger: boolean;
+  showLessItems: boolean;
+  showPrevNextJumpers: boolean;
+  showQuickJumper: boolean | object;
+  showTitle: boolean;
+  simple: boolean;
+  disabled: boolean;
+
+  locale: PaginationLocale;
+
+  style: React.CSSProperties;
+
+  selectComponentClass: React.ComponentType;
+  prevIcon: React.ComponentType | React.ReactNode;
+  nextIcon: React.ComponentType | React.ReactNode;
+  jumpPrevIcon: React.ComponentType | React.ReactNode;
+  jumpNextIcon: React.ComponentType | React.ReactNode;
+}
+
+export interface PaginationProps extends Partial<PaginationData> {
+  onChange?: (page: number, pageSize: number) => void;
+  onShowSizeChange?: (current: number, size: number) => void;
+  itemRender?: (
+    page: number,
+    type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next',
+    element: React.ReactNode,
+  ) => React.ReactNode;
+  showTotal?: (total: number, range: [number, number]) => React.ReactNode;
+}
+export interface PaginationState {
+  current: number;
+  currentInputValue: number;
+  pageSize: number;
+}
diff --git a/src/locale/am.ts b/src/locale/am.ts
index 97835632..fedb6a92 100644
--- a/src/locale/am.ts
+++ b/src/locale/am.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ ግፅ',
   jump_to: 'ሂድ ወደ',
   jump_to_confirm: 'አረጋግጥ',
   page: 'ገፅ',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'ያለፈው ገፅ',
   next_page: 'ቀጣይ ገፅ',
   prev_5: 'ያለፈው 5 ገፅ',
@@ -14,3 +16,5 @@ export default {
   next_3: 'ቀጣይ 3 ገፅ',
   page_size: 'የገፅ መጠን',
 };
+
+export default locale;
diff --git a/src/locale/ar_EG.ts b/src/locale/ar_EG.ts
index 7c99a914..45453008 100644
--- a/src/locale/ar_EG.ts
+++ b/src/locale/ar_EG.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ الصفحة',
   jump_to: 'الذهاب إلى',
   jump_to_confirm: 'تأكيد',
   page: 'الصفحة',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'الصفحة السابقة',
   next_page: 'الصفحة التالية',
   prev_5: 'خمس صفحات سابقة',
@@ -14,3 +16,5 @@ export default {
   next_3: 'ثلاث صفحات تالية',
   page_size: 'مقاس الصفحه',
 };
+
+export default locale;
diff --git a/src/locale/az_AZ.ts b/src/locale/az_AZ.ts
index d0960c55..921d6784 100644
--- a/src/locale/az_AZ.ts
+++ b/src/locale/az_AZ.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ səhifə',
   jump_to: 'Get',
   jump_to_confirm: 'təsdiqlə',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Əvvəlki Səhifə',
   next_page: 'Növbəti Səhifə',
   prev_5: 'Əvvəlki 5 Səhifə',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Növbəti 3 Səhifə',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/bg_BG.ts b/src/locale/bg_BG.ts
index b19c1396..b35f3db1 100644
--- a/src/locale/bg_BG.ts
+++ b/src/locale/bg_BG.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ страница',
   jump_to: 'Към',
   jump_to_confirm: 'потвърждавам',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Предишна страница',
   next_page: 'Следваща страница',
   prev_5: 'Предишни 5 страници',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Следващи 3 страници',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/bn_BD.ts b/src/locale/bn_BD.ts
index f9f90948..039d9c3b 100644
--- a/src/locale/bn_BD.ts
+++ b/src/locale/bn_BD.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ পৃষ্ঠা',
   jump_to: 'যাও',
   jump_to_confirm: 'নিশ্চিত',
   page: 'পৃষ্ঠা',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'আগের পৃষ্ঠা',
   next_page: 'পরের পৃষ্ঠা',
   prev_5: 'পূর্ববর্তী ৫ পৃষ্ঠা',
@@ -14,3 +16,5 @@ export default {
   next_3: 'পরবর্তী ৩ পৃষ্ঠা',
   page_size: 'পাতার আকার',
 };
+
+export default locale;
diff --git a/src/locale/by_BY.ts b/src/locale/by_BY.ts
index de64cf6b..5284b579 100644
--- a/src/locale/by_BY.ts
+++ b/src/locale/by_BY.ts
@@ -1,10 +1,12 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/старонка',
   jump_to: 'Перайсці',
   jump_to_confirm: 'Пацвердзіць',
   page: '',
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Назад',
   next_page: 'Наперад',
   prev_5: 'Папярэднія 5',
@@ -13,3 +15,5 @@ export default {
   next_3: 'Наступныя 3',
   page_size: 'памер старонкі',
 };
+
+export default locale;
diff --git a/src/locale/ca_ES.ts b/src/locale/ca_ES.ts
index df4f01e4..22a16c58 100644
--- a/src/locale/ca_ES.ts
+++ b/src/locale/ca_ES.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ pàgina',
   jump_to: 'Anar a',
   jump_to_confirm: 'Confirma',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Pàgina prèvia',
   next_page: 'Pàgina següent',
   prev_5: '5 pàgines prèvies',
@@ -14,3 +16,5 @@ export default {
   next_3: '3 pàgines següents',
   page_size: 'mida de la pàgina',
 };
+
+export default locale;
diff --git a/src/locale/cs_CZ.ts b/src/locale/cs_CZ.ts
index 730e79de..cdba815e 100644
--- a/src/locale/cs_CZ.ts
+++ b/src/locale/cs_CZ.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ strana',
   jump_to: 'Přejít',
   jump_to_confirm: 'potvrdit',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Předchozí strana',
   next_page: 'Následující strana',
   prev_5: 'Předchozích 5 stran',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Následující 3 strany',
   page_size: 'velikost stránky',
 };
+
+export default locale;
diff --git a/src/locale/da_DK.ts b/src/locale/da_DK.ts
index f65d82e3..24dbbd11 100644
--- a/src/locale/da_DK.ts
+++ b/src/locale/da_DK.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ side',
   jump_to: 'Gå til',
   jump_to_confirm: 'bekræft',
   page: 'Side',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Forrige Side',
   next_page: 'Næste Side',
   prev_5: 'Forrige 5 Sider',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Næste 3 Sider',
   page_size: 'sidestørrelse',
 };
+
+export default locale;
diff --git a/src/locale/de_DE.ts b/src/locale/de_DE.ts
index e0136afb..aa595cef 100644
--- a/src/locale/de_DE.ts
+++ b/src/locale/de_DE.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ Seite',
   jump_to: 'Gehe zu',
   jump_to_confirm: 'bestätigen',
   page: 'Seite',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Vorherige Seite',
   next_page: 'Nächste Seite',
   prev_5: '5 Seiten zurück',
@@ -14,3 +16,5 @@ export default {
   next_3: '3 Seiten vor',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/el_GR.ts b/src/locale/el_GR.ts
index e61327c3..41ef95dd 100644
--- a/src/locale/el_GR.ts
+++ b/src/locale/el_GR.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ σελίδα',
   jump_to: 'Μετάβαση',
   jump_to_confirm: 'επιβεβαιώνω',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Προηγούμενη Σελίδα',
   next_page: 'Επόμενη Σελίδα',
   prev_5: 'Προηγούμενες 5 Σελίδες',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Επόμενες 3 Σελίδες',
   page_size: 'Μέγεθος σελίδας',
 };
+
+export default locale;
diff --git a/src/locale/en_GB.ts b/src/locale/en_GB.ts
index a0c5ff5f..481ff0ef 100644
--- a/src/locale/en_GB.ts
+++ b/src/locale/en_GB.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ page',
   jump_to: 'Go to',
   jump_to_confirm: 'confirm',
   page: 'Page',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Previous Page',
   next_page: 'Next Page',
   prev_5: 'Previous 5 Pages',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Next 3 Pages',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/en_US.ts b/src/locale/en_US.ts
index a0c5ff5f..481ff0ef 100644
--- a/src/locale/en_US.ts
+++ b/src/locale/en_US.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ page',
   jump_to: 'Go to',
   jump_to_confirm: 'confirm',
   page: 'Page',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Previous Page',
   next_page: 'Next Page',
   prev_5: 'Previous 5 Pages',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Next 3 Pages',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/es_ES.ts b/src/locale/es_ES.ts
index 2a4a6dce..7139b67c 100644
--- a/src/locale/es_ES.ts
+++ b/src/locale/es_ES.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ página',
   jump_to: 'Ir a',
   jump_to_confirm: 'confirmar',
   page: 'Página',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Página anterior',
   next_page: 'Página siguiente',
   prev_5: '5 páginas previas',
@@ -14,3 +16,5 @@ export default {
   next_3: '3 páginas siguientes',
   page_size: 'tamaño de página',
 };
+
+export default locale;
diff --git a/src/locale/et_EE.ts b/src/locale/et_EE.ts
index 548b0522..5978de8e 100644
--- a/src/locale/et_EE.ts
+++ b/src/locale/et_EE.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ leheküljel',
   jump_to: 'Hüppa',
   jump_to_confirm: 'Kinnitage',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Eelmine leht',
   next_page: 'Järgmine leht',
   prev_5: 'Eelmised 5 lehekülge',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Järgmised 3 lehekülge',
   page_size: 'lehe suurus',
 };
+
+export default locale;
diff --git a/src/locale/eu_ES.ts b/src/locale/eu_ES.ts
index 281bcb48..cf283b4f 100644
--- a/src/locale/eu_ES.ts
+++ b/src/locale/eu_ES.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ orrialde',
   jump_to: '-ra joan',
   jump_to_confirm: 'baieztatu',
   page: 'Orrialde',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Aurreko orrialdea',
   next_page: 'Hurrengo orrialdea',
   prev_5: 'aurreko 5 orrialde',
@@ -14,3 +16,5 @@ export default {
   next_3: 'hurrengo 3 orrialde',
   page_size: 'orrien tamaina',
 };
+
+export default locale;
diff --git a/src/locale/fa_IR.ts b/src/locale/fa_IR.ts
index 64de0aa5..240ae182 100644
--- a/src/locale/fa_IR.ts
+++ b/src/locale/fa_IR.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ صفحه',
   jump_to: 'برو به',
   jump_to_confirm: 'تایید',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'صفحه قبلی',
   next_page: 'صفحه بعدی',
   prev_5: '۵ صفحه قبلی',
@@ -14,3 +16,5 @@ export default {
   next_3: '۳ صفحه بعدی',
   page_size: 'اندازه صفحه',
 };
+
+export default locale;
diff --git a/src/locale/fi_FI.ts b/src/locale/fi_FI.ts
index 19fb1a05..41e8ebde 100644
--- a/src/locale/fi_FI.ts
+++ b/src/locale/fi_FI.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ sivu',
   jump_to: 'Mene',
   jump_to_confirm: 'Potvrdite',
   page: 'Sivu',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Edellinen sivu',
   next_page: 'Seuraava sivu',
   prev_5: 'Edelliset 5 sivua',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Seuraavat 3 sivua',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/fr_BE.ts b/src/locale/fr_BE.ts
index d604531a..08be8534 100644
--- a/src/locale/fr_BE.ts
+++ b/src/locale/fr_BE.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ page',
   jump_to: 'Aller à',
   jump_to_confirm: 'confirmer',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Page précédente',
   next_page: 'Page suivante',
   prev_5: '5 Pages précédentes',
@@ -14,3 +16,5 @@ export default {
   next_3: '3 Pages suivantes',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/fr_CA.ts b/src/locale/fr_CA.ts
index 914dbb87..08179c48 100644
--- a/src/locale/fr_CA.ts
+++ b/src/locale/fr_CA.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ page',
   jump_to: 'Aller à',
   jump_to_confirm: 'confirmer',
   page: 'Page',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Page précédente',
   next_page: 'Page suivante',
   prev_5: '5 Pages précédentes',
@@ -14,3 +16,5 @@ export default {
   next_3: '3 Pages suivantes',
   page_size: 'taille de la page',
 };
+
+export default locale;
diff --git a/src/locale/fr_FR.ts b/src/locale/fr_FR.ts
index 914dbb87..08179c48 100644
--- a/src/locale/fr_FR.ts
+++ b/src/locale/fr_FR.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ page',
   jump_to: 'Aller à',
   jump_to_confirm: 'confirmer',
   page: 'Page',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Page précédente',
   next_page: 'Page suivante',
   prev_5: '5 Pages précédentes',
@@ -14,3 +16,5 @@ export default {
   next_3: '3 Pages suivantes',
   page_size: 'taille de la page',
 };
+
+export default locale;
diff --git a/src/locale/ga_IE.ts b/src/locale/ga_IE.ts
index 1c19fff2..44df59ff 100644
--- a/src/locale/ga_IE.ts
+++ b/src/locale/ga_IE.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ leathanach',
   jump_to: 'Téigh',
   jump_to_confirm: 'dheimhnigh',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Leathanach Roimhe Seo',
   next_page: 'An chéad leathanach eile',
   prev_5: '5 leathanach roimhe seo',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Ar Aghaidh 3 Leathanaigh',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/gl_ES.ts b/src/locale/gl_ES.ts
index 91391389..1885bfb3 100644
--- a/src/locale/gl_ES.ts
+++ b/src/locale/gl_ES.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ páxina',
   jump_to: 'Ir a',
   jump_to_confirm: 'confirmar',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Páxina anterior',
   next_page: 'Páxina seguinte',
   prev_5: '5 páxinas previas',
@@ -14,3 +16,5 @@ export default {
   next_3: '3 páxinas seguintes',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/he_IL.ts b/src/locale/he_IL.ts
index 647abd16..f1825528 100644
--- a/src/locale/he_IL.ts
+++ b/src/locale/he_IL.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ עמוד',
   jump_to: 'עבור אל',
   jump_to_confirm: 'אישור',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'העמוד הקודם',
   next_page: 'העמוד הבא',
   prev_5: '5 עמודים קודמים',
@@ -14,3 +16,5 @@ export default {
   next_3: '3 עמודים הבאים',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/hi_IN.ts b/src/locale/hi_IN.ts
index 08242710..c204a323 100644
--- a/src/locale/hi_IN.ts
+++ b/src/locale/hi_IN.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ पृष्ठ',
   jump_to: 'इस पर चलें',
   jump_to_confirm: 'पुष्टि करें',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'पिछला पृष्ठ',
   next_page: 'अगला पृष्ठ',
   prev_5: 'पिछले 5 पृष्ठ',
@@ -14,3 +16,5 @@ export default {
   next_3: 'अगले 3 पेज',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/hr_HR.ts b/src/locale/hr_HR.ts
index c0af94fc..1d8ddd5c 100644
--- a/src/locale/hr_HR.ts
+++ b/src/locale/hr_HR.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ str',
   jump_to: 'Idi na',
   jump_to_confirm: 'potvrdi',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Prijašnja stranica',
   next_page: 'Sljedeća stranica',
   prev_5: 'Prijašnjih 5 stranica',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Sljedeće 3 stranice',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/hu_HU.ts b/src/locale/hu_HU.ts
index 58bc4ebc..5355c67c 100644
--- a/src/locale/hu_HU.ts
+++ b/src/locale/hu_HU.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ oldal', // '/ page',
   jump_to: 'Ugrás', // 'Goto',
   jump_to_confirm: 'megerősít', // 'confirm',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Előző oldal', // 'Previous Page',
   next_page: 'Következő oldal', // 'Next Page',
   prev_5: 'Előző 5 oldal', // 'Previous 5 Pages',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Következő 3 oldal', // 'Next 3 Pages',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/id_ID.ts b/src/locale/id_ID.ts
index 90f0a99e..0a96afab 100644
--- a/src/locale/id_ID.ts
+++ b/src/locale/id_ID.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ halaman',
   jump_to: 'Menuju',
   jump_to_confirm: 'konfirmasi',
   page: 'Halaman',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Halaman Sebelumnya',
   next_page: 'Halaman Berikutnya',
   prev_5: '5 Halaman Sebelumnya',
@@ -14,3 +16,5 @@ export default {
   next_3: '3 Halaman Berikutnya',
   page_size: 'ukuran halaman',
 };
+
+export default locale;
diff --git a/src/locale/is_IS.ts b/src/locale/is_IS.ts
index 5be73143..ef035104 100644
--- a/src/locale/is_IS.ts
+++ b/src/locale/is_IS.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ síðu',
   jump_to: 'Síða',
   jump_to_confirm: 'staðfest',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Fyrri síða',
   next_page: 'Næsta síða',
   prev_5: 'Til baka 5 síður',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Áfram 3 síður',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/it_IT.ts b/src/locale/it_IT.ts
index 94acd80f..ae3c8967 100644
--- a/src/locale/it_IT.ts
+++ b/src/locale/it_IT.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ pagina',
   jump_to: 'vai a',
   jump_to_confirm: 'Conferma',
   page: 'Pagina',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Pagina precedente',
   next_page: 'Pagina successiva',
   prev_5: 'Precedente 5 pagine',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Prossime 3 pagine',
   page_size: 'dimensioni della pagina',
 };
+
+export default locale;
diff --git a/src/locale/ja_JP.ts b/src/locale/ja_JP.ts
index 2be659a2..a954e093 100644
--- a/src/locale/ja_JP.ts
+++ b/src/locale/ja_JP.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '件 / ページ',
   jump_to: '移動',
   jump_to_confirm: '確認する',
   page: 'ページ',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: '前のページ',
   next_page: '次のページ',
   prev_5: '前 5ページ',
@@ -14,3 +16,5 @@ export default {
   next_3: '次 3ページ',
   page_size: 'ページサイズ',
 };
+
+export default locale;
diff --git a/src/locale/ka_GE.ts b/src/locale/ka_GE.ts
index 3777003f..db930520 100644
--- a/src/locale/ka_GE.ts
+++ b/src/locale/ka_GE.ts
@@ -1,10 +1,12 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ გვერდი.',
   jump_to: 'გადასვლა',
   jump_to_confirm: 'დადასტურება',
   page: '',
-  // Pagination.jsx
+  // Pagination
   prev_page: 'წინა გვერდი',
   next_page: 'შემდეგი გვერდი',
   prev_5: 'წინა 5 გვერდი',
@@ -13,3 +15,5 @@ export default {
   next_3: 'შემდეგი 3 გვერდი',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/kk_KZ.ts b/src/locale/kk_KZ.ts
index 3e7913b5..3b4e9300 100644
--- a/src/locale/kk_KZ.ts
+++ b/src/locale/kk_KZ.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ бет',
   jump_to: 'Секіру',
   jump_to_confirm: 'Растау',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Артқа',
   next_page: 'Алға',
   prev_5: 'Алдыңғы 5',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Келесі 3',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/km_KH.ts b/src/locale/km_KH.ts
index 68ae005f..d7be29f5 100644
--- a/src/locale/km_KH.ts
+++ b/src/locale/km_KH.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ ទំព័រ',
   jump_to: 'លោត​ទៅ',
   jump_to_confirm: 'បញ្ជាក់',
   page: 'ទំព័រ',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'ទំព័រ​មុន',
   next_page: 'ទំព័រ​​បន្ទាប់',
   prev_5: '៥ ទំព័រថយក្រោយ',
@@ -14,3 +16,5 @@ export default {
   next_3: '៣ ទំព័រទៅមុខ',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/kmr_IQ.ts b/src/locale/kmr_IQ.ts
index 5ab84ba0..5995cf26 100644
--- a/src/locale/kmr_IQ.ts
+++ b/src/locale/kmr_IQ.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ rûpel',
   jump_to: 'Biçe',
   jump_to_confirm: 'piştrast bike',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Rûpelê Pêş',
   next_page: 'Rûpelê Paş',
   prev_5: '5 Rûpelên Pêş',
@@ -14,3 +16,5 @@ export default {
   next_3: '3 Rûpelên Paş',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/kn_IN.ts b/src/locale/kn_IN.ts
index 35ee1284..085c7b76 100644
--- a/src/locale/kn_IN.ts
+++ b/src/locale/kn_IN.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ ಪುಟ',
   jump_to: 'ಜಿಗಿತವನ್ನು',
   jump_to_confirm: 'ಖಚಿತಪಡಿಸಲು ಜಿಗಿತವನ್ನು',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'ಹಿಂದಿನ ಪುಟ',
   next_page: 'ಮುಂದಿನ ಪುಟ',
   prev_5: 'ಹಿಂದಿನ 5 ಪುಟಗಳು',
@@ -14,3 +16,5 @@ export default {
   next_3: 'ಮುಂದಿನ 3 ಪುಟಗಳು',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/ko_KR.ts b/src/locale/ko_KR.ts
index e7600f3f..fa8acf1c 100644
--- a/src/locale/ko_KR.ts
+++ b/src/locale/ko_KR.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ 페이지',
   jump_to: '이동하기',
   jump_to_confirm: '확인하다',
   page: '페이지',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: '이전 페이지',
   next_page: '다음 페이지',
   prev_5: '이전 5 페이지',
@@ -14,3 +16,5 @@ export default {
   next_3: '다음 3 페이지',
   page_size: '페이지 크기',
 };
+
+export default locale;
diff --git a/src/locale/lt_LT.ts b/src/locale/lt_LT.ts
index 26016d3f..e1066224 100644
--- a/src/locale/lt_LT.ts
+++ b/src/locale/lt_LT.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ psl.',
   jump_to: 'Pereiti į',
   jump_to_confirm: 'patvirtinti',
   page: 'psl.',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Atgal',
   next_page: 'Pirmyn',
   prev_5: 'Grįžti 5 psl.',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Peršokti 3 psl.',
   page_size: 'Puslapio dydis',
 };
+
+export default locale;
diff --git a/src/locale/lv_LV.ts b/src/locale/lv_LV.ts
index dd883e51..320368b8 100644
--- a/src/locale/lv_LV.ts
+++ b/src/locale/lv_LV.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ lappuse',
   jump_to: 'iet uz',
   jump_to_confirm: 'apstiprināt',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Iepriekšējā lapa',
   next_page: 'Nākamā lapaspuse',
   prev_5: 'Iepriekšējās 5 lapas',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Nākamās 3 lapas',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/mk_MK.ts b/src/locale/mk_MK.ts
index 40b7cd86..e1c494ec 100644
--- a/src/locale/mk_MK.ts
+++ b/src/locale/mk_MK.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ стр',
   jump_to: 'Оди на',
   jump_to_confirm: 'потврди',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Претходна страница',
   next_page: 'Наредна страница',
   prev_5: 'Претходни 5 страници',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Наредни 3 страници',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/ml_IN.ts b/src/locale/ml_IN.ts
index 6b80ad52..d761ce46 100644
--- a/src/locale/ml_IN.ts
+++ b/src/locale/ml_IN.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ പേജ്',
   jump_to: 'അടുത്തത്',
   jump_to_confirm: 'ഉറപ്പാക്കുക',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'മുൻപുള്ള പേജ്',
   next_page: 'അടുത്ത പേജ്',
   prev_5: 'മുൻപുള്ള 5 പേജുകൾ',
@@ -14,3 +16,5 @@ export default {
   next_3: 'അടുത്ത 3 പേജുകൾ',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/mn_MN.ts b/src/locale/mn_MN.ts
index f5a58ac8..18199be9 100644
--- a/src/locale/mn_MN.ts
+++ b/src/locale/mn_MN.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ хуудас',
   jump_to: 'Шилжих',
   jump_to_confirm: 'сонгох',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Өмнөх хуудас',
   next_page: 'Дараагийн хуудас',
   prev_5: 'Дараагийн 5 хуудас',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Дараагийн 3 хуудас',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/ms_MY.ts b/src/locale/ms_MY.ts
index 45ccd3fa..2e3366d1 100644
--- a/src/locale/ms_MY.ts
+++ b/src/locale/ms_MY.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ halaman',
   jump_to: 'Lompat ke',
   jump_to_confirm: 'Sahkan',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Halaman sebelumnya',
   next_page: 'Halam seterusnya',
   prev_5: '5 halaman sebelum',
@@ -14,3 +16,5 @@ export default {
   next_3: '3 halaman seterusnya',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/my_MM.ts b/src/locale/my_MM.ts
index fc49d785..ad84ab40 100644
--- a/src/locale/my_MM.ts
+++ b/src/locale/my_MM.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ စာမျက်နှာ',
   jump_to: 'သွားရန်',
   jump_to_confirm: 'သေချာပြီ',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'ယခင်စာမျက်နှာ',
   next_page: 'နောက်စာမျက်နှာ',
   prev_5: 'ယခင် ၅ခုမြောက်',
@@ -14,3 +16,5 @@ export default {
   next_3: 'နောက် ၃ခုမြောက်',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/nb_NO.ts b/src/locale/nb_NO.ts
index 8300a424..3b357934 100644
--- a/src/locale/nb_NO.ts
+++ b/src/locale/nb_NO.ts
@@ -1,10 +1,12 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ side',
   jump_to: 'Gå til side',
   page: 'Side',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Forrige side',
   next_page: 'Neste side',
   prev_5: '5 forrige',
@@ -13,3 +15,5 @@ export default {
   next_3: '3 neste',
   page_size: 'sidestørrelse',
 };
+
+export default locale;
diff --git a/src/locale/nl_BE.ts b/src/locale/nl_BE.ts
index 55a76ca3..f3264b4e 100644
--- a/src/locale/nl_BE.ts
+++ b/src/locale/nl_BE.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ pagina',
   jump_to: 'Ga naar',
   jump_to_confirm: 'bevestigen',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Vorige pagina',
   next_page: 'Volgende pagina',
   prev_5: "Vorige 5 pagina's",
@@ -14,3 +16,5 @@ export default {
   next_3: "Volgende 3 pagina's",
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/nl_NL.ts b/src/locale/nl_NL.ts
index c3773915..1a5375c1 100644
--- a/src/locale/nl_NL.ts
+++ b/src/locale/nl_NL.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ pagina',
   jump_to: 'Ga naar',
   jump_to_confirm: 'bevestigen',
   page: 'Pagina',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Vorige pagina',
   next_page: 'Volgende pagina',
   prev_5: "Vorige 5 pagina's",
@@ -14,3 +16,5 @@ export default {
   next_3: "Volgende 3 pagina's",
   page_size: 'pagina grootte',
 };
+
+export default locale;
diff --git a/src/locale/pa_IN.ts b/src/locale/pa_IN.ts
index 500c43d2..1df09fb0 100644
--- a/src/locale/pa_IN.ts
+++ b/src/locale/pa_IN.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ ਪੰਨਾ',
   jump_to: 'Goto',
   jump_to_confirm: 'ਪੁਸ਼ਟੀ ਕਰੋ',
   page: 'ਪੰਨਾ',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'ਪਿਛਲਾ ਪੰਨਾ',
   next_page: 'ਅਗਲਾ ਪੰਨਾ',
   prev_5: 'ਪਿਛਲੇ 5 ਪੰਨੇ',
@@ -14,3 +16,5 @@ export default {
   next_3: 'ਅਗਲੇ 3 ਪੰਨੇ',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/pb_IN.ts b/src/locale/pb_IN.ts
index 500c43d2..1df09fb0 100644
--- a/src/locale/pb_IN.ts
+++ b/src/locale/pb_IN.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ ਪੰਨਾ',
   jump_to: 'Goto',
   jump_to_confirm: 'ਪੁਸ਼ਟੀ ਕਰੋ',
   page: 'ਪੰਨਾ',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'ਪਿਛਲਾ ਪੰਨਾ',
   next_page: 'ਅਗਲਾ ਪੰਨਾ',
   prev_5: 'ਪਿਛਲੇ 5 ਪੰਨੇ',
@@ -14,3 +16,5 @@ export default {
   next_3: 'ਅਗਲੇ 3 ਪੰਨੇ',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/pl_PL.ts b/src/locale/pl_PL.ts
index 6a8288c9..94f2af73 100644
--- a/src/locale/pl_PL.ts
+++ b/src/locale/pl_PL.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: 'na stronę',
   jump_to: 'Idź do',
   jump_to_confirm: 'potwierdź',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Poprzednia strona',
   next_page: 'Następna strona',
   prev_5: 'Poprzednie 5 stron',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Następne 3 strony',
   page_size: 'rozmiar strony',
 };
+
+export default locale;
diff --git a/src/locale/pt_BR.ts b/src/locale/pt_BR.ts
index e241ed31..68713507 100644
--- a/src/locale/pt_BR.ts
+++ b/src/locale/pt_BR.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ página',
   jump_to: 'Vá até',
   jump_to_confirm: 'confirme',
   page: 'Página',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Página anterior',
   next_page: 'Próxima página',
   prev_5: '5 páginas anteriores',
@@ -14,3 +16,5 @@ export default {
   next_3: '3 próximas páginas',
   page_size: 'tamanho da página',
 };
+
+export default locale;
diff --git a/src/locale/pt_PT.ts b/src/locale/pt_PT.ts
index b45a690f..d82c1903 100644
--- a/src/locale/pt_PT.ts
+++ b/src/locale/pt_PT.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ página',
   jump_to: 'Saltar',
   jump_to_confirm: 'confirmar',
   page: 'Página',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Página Anterior',
   next_page: 'Página Seguinte',
   prev_5: 'Recuar 5 Páginas',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Avançar 3 Páginas',
   page_size: 'mărimea paginii',
 };
+
+export default locale;
diff --git a/src/locale/ro_RO.ts b/src/locale/ro_RO.ts
index 8f7d967b..fe40e368 100644
--- a/src/locale/ro_RO.ts
+++ b/src/locale/ro_RO.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ pagină',
   jump_to: 'Mergi la',
   jump_to_confirm: 'confirm',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Pagina Anterioară',
   next_page: 'Pagina Următoare',
   prev_5: '5 Pagini Anterioare',
@@ -14,3 +16,5 @@ export default {
   next_3: '3 Pagini Următoare',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/ru_RU.ts b/src/locale/ru_RU.ts
index c9dc5c53..7aa3fd1a 100644
--- a/src/locale/ru_RU.ts
+++ b/src/locale/ru_RU.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ стр.',
   jump_to: 'Перейти',
   jump_to_confirm: 'подтвердить',
   page: 'Страница',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Назад',
   next_page: 'Вперед',
   prev_5: 'Предыдущие 5',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Следующие 3',
   page_size: 'размер страницы',
 };
+
+export default locale;
diff --git a/src/locale/si_LK.ts b/src/locale/si_LK.ts
index 43178591..cb83031b 100644
--- a/src/locale/si_LK.ts
+++ b/src/locale/si_LK.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ පිටුව',
   jump_to: 'වෙත යන්න',
   jump_to_confirm: 'තහවුරු',
   page: 'පිටුව',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'කලින් පිටුව',
   next_page: 'ඊළඟ පිටුව',
   prev_5: 'කලින් පිටු 5',
@@ -14,3 +16,5 @@ export default {
   next_3: 'ඊළඟ පිටු 3',
   page_size: 'පිටුවේ ප්‍රමාණය',
 };
+
+export default locale;
diff --git a/src/locale/sk_SK.ts b/src/locale/sk_SK.ts
index e8c0ee04..a994cb5f 100644
--- a/src/locale/sk_SK.ts
+++ b/src/locale/sk_SK.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ strana',
   jump_to: 'Choď na',
   jump_to_confirm: 'potvrdit',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Predchádzajúca strana',
   next_page: 'Nasledujúca strana',
   prev_5: 'Predchádzajúcich 5 strán',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Nasledujúce 3 strany',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/sl_SI.ts b/src/locale/sl_SI.ts
index 47de1c17..e09728d7 100644
--- a/src/locale/sl_SI.ts
+++ b/src/locale/sl_SI.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ strani',
   jump_to: 'Pojdi na',
   jump_to_confirm: 'potrdi',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Prejšnja stran',
   next_page: 'Naslednja stran',
   prev_5: 'Prejšnjih 5 strani',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Naslednje 3 strani',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/sr_RS.ts b/src/locale/sr_RS.ts
index cce683b1..eee0cc12 100644
--- a/src/locale/sr_RS.ts
+++ b/src/locale/sr_RS.ts
@@ -1,10 +1,12 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ strani',
   jump_to: 'Idi na',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Prethodna strana',
   next_page: 'Sledeća strana',
   prev_5: 'Prethodnih 5 Strana',
@@ -13,3 +15,5 @@ export default {
   next_3: 'Sledećih 3 Strane',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/sv_SE.ts b/src/locale/sv_SE.ts
index 8b492e10..e5ec562f 100644
--- a/src/locale/sv_SE.ts
+++ b/src/locale/sv_SE.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ sida',
   jump_to: 'Gå till',
   jump_to_confirm: 'bekräfta',
   page: 'Sida',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Föreg sida',
   next_page: 'Nästa sida',
   prev_5: 'Föreg 5 sidor',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Nästa 3 sidor',
   page_size: 'sidstorlek',
 };
+
+export default locale;
diff --git a/src/locale/ta_IN.ts b/src/locale/ta_IN.ts
index f2e695a7..03fd8c16 100644
--- a/src/locale/ta_IN.ts
+++ b/src/locale/ta_IN.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ பக்கம்',
   jump_to: 'அடுத்த',
   jump_to_confirm: 'உறுதிப்படுத்தவும்',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'முந்தைய பக்கம்',
   next_page: 'அடுத்த பக்கம்',
   prev_5: 'முந்தைய 5 பக்கங்கள்',
@@ -14,3 +16,5 @@ export default {
   next_3: 'அடுத்த 3 பக்கங்கள்',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/th_TH.ts b/src/locale/th_TH.ts
index 47a6ce21..18a41cd5 100644
--- a/src/locale/th_TH.ts
+++ b/src/locale/th_TH.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ หน้า',
   jump_to: 'ไปยัง',
   jump_to_confirm: 'ยืนยัน',
   page: 'หน้า',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'หน้าก่อนหน้า',
   next_page: 'หน้าถัดไป',
   prev_5: 'ย้อนกลับ 5 หน้า',
@@ -14,3 +16,5 @@ export default {
   next_3: 'ถัดไป 3 หน้า',
   page_size: 'ขนาดหน้า',
 };
+
+export default locale;
diff --git a/src/locale/tk_TK.ts b/src/locale/tk_TK.ts
index 503271cf..685c5ece 100644
--- a/src/locale/tk_TK.ts
+++ b/src/locale/tk_TK.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ sahypa',
   jump_to: 'Git',
   jump_to_confirm: 'tassykla',
   page: 'Sahypa',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Öňki sahypa',
   next_page: 'Soňky sahypa',
   prev_5: 'Öňki 5 sahypa',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Soňky 3 sahypa',
   page_size: 'Sahypa sany',
 };
+
+export default locale;
diff --git a/src/locale/tr_TR.ts b/src/locale/tr_TR.ts
index 06c035e6..5e3b61b6 100644
--- a/src/locale/tr_TR.ts
+++ b/src/locale/tr_TR.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ sayfa',
   jump_to: 'Git',
   jump_to_confirm: 'onayla',
   page: 'Sayfa',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Önceki Sayfa',
   next_page: 'Sonraki Sayfa',
   prev_5: 'Önceki 5 Sayfa',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Sonraki 3 Sayfa',
   page_size: 'sayfa boyutu',
 };
+
+export default locale;
diff --git a/src/locale/ug_CN.ts b/src/locale/ug_CN.ts
index 6d6d534f..5ee905ac 100644
--- a/src/locale/ug_CN.ts
+++ b/src/locale/ug_CN.ts
@@ -1,10 +1,12 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: 'تال/ھەر بەت',
   jump_to: 'بەتكە سەكرەش',
   jump_to_confirm: 'مۇقىملاشتۇرۇش',
   page: 'بەت',
-  // Pagination.jsx
+  // Pagination
   prev_page: 'ئالدىنقى',
   next_page: 'كېيىنكى',
   prev_5: 'ئالدىغا 5 بەت',
@@ -13,3 +15,5 @@ export default {
   next_3: 'كەينىگە 3 بەت',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/uk_UA.ts b/src/locale/uk_UA.ts
index 1ba87eec..9e2b4dc1 100644
--- a/src/locale/uk_UA.ts
+++ b/src/locale/uk_UA.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ сторінці',
   jump_to: 'Перейти',
   jump_to_confirm: 'підтвердити',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Попередня сторінка',
   next_page: 'Наступна сторінка',
   prev_5: 'Попередні 5 сторінок',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Наступні 3 сторінки',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/ur_PK.ts b/src/locale/ur_PK.ts
index a9a682e3..6fc2b210 100644
--- a/src/locale/ur_PK.ts
+++ b/src/locale/ur_PK.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ صفحہ',
   jump_to: 'پاس جاؤ',
   jump_to_confirm: 'تصدیق کریں',
   page: '',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'پچھلا صفحہ',
   next_page: 'اگلا صفحہ',
   prev_5: 'پچھلے 5 صفحات',
@@ -14,3 +16,5 @@ export default {
   next_3: 'اگلے 3 صفحات',
   page_size: 'Page Size',
 };
+
+export default locale;
diff --git a/src/locale/uz_UZ.ts b/src/locale/uz_UZ.ts
index efb64933..5aef80d4 100644
--- a/src/locale/uz_UZ.ts
+++ b/src/locale/uz_UZ.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ sah.',
   jump_to: "O'tish",
   jump_to_confirm: 'tasdiqlash',
   page: 'Sahifa',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Orqaga',
   next_page: 'Oldinga',
   prev_5: 'Oldingi 5',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Keyingi 3',
   page_size: 'sahifa hajmi',
 };
+
+export default locale;
diff --git a/src/locale/vi_VN.ts b/src/locale/vi_VN.ts
index d428369b..99b50aab 100644
--- a/src/locale/vi_VN.ts
+++ b/src/locale/vi_VN.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '/ trang',
   jump_to: 'Đến',
   jump_to_confirm: 'xác nhận',
   page: 'Trang',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: 'Trang Trước',
   next_page: 'Trang Kế',
   prev_5: 'Về 5 Trang Trước',
@@ -14,3 +16,5 @@ export default {
   next_3: 'Đến 3 Trang Kế',
   page_size: 'kích thước trang',
 };
+
+export default locale;
diff --git a/src/locale/zh_CN.ts b/src/locale/zh_CN.ts
index e5a352ad..51ed359a 100644
--- a/src/locale/zh_CN.ts
+++ b/src/locale/zh_CN.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '条/页',
   jump_to: '跳至',
   jump_to_confirm: '确定',
   page: '页',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: '上一页',
   next_page: '下一页',
   prev_5: '向前 5 页',
@@ -14,3 +16,5 @@ export default {
   next_3: '向后 3 页',
   page_size: '页码',
 };
+
+export default locale;
diff --git a/src/locale/zh_TW.ts b/src/locale/zh_TW.ts
index 38521119..57da9587 100644
--- a/src/locale/zh_TW.ts
+++ b/src/locale/zh_TW.ts
@@ -1,11 +1,13 @@
-export default {
-  // Options.jsx
+import type { PaginationLocale } from '../interface';
+
+const locale: PaginationLocale = {
+  // Options
   items_per_page: '條/頁',
   jump_to: '跳至',
   jump_to_confirm: '確定',
   page: '頁',
 
-  // Pagination.jsx
+  // Pagination
   prev_page: '上一頁',
   next_page: '下一頁',
   prev_5: '向前 5 頁',
@@ -14,3 +16,5 @@ export default {
   next_3: '向後 3 頁',
   page_size: '頁碼',
 };
+
+export default locale;
diff --git a/tests/__snapshots__/demo.test.js.snap b/tests/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000..ea30afad
--- /dev/null
+++ b/tests/__snapshots__/demo.test.js.snap
@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Example basic 1`] = `"<ul class="rc-pagination"><li title="上一页" class="rc-pagination-prev rc-pagination-disabled" aria-disabled="true"><button type="button" aria-label="prev page" class="rc-pagination-item-link" disabled=""></button></li><li title="1" class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-active" tabindex="0"><a rel="nofollow">1</a></li><li title="2" class="rc-pagination-item rc-pagination-item-2" tabindex="0"><a rel="nofollow">2</a></li><li title="3" class="rc-pagination-item rc-pagination-item-3" tabindex="0"><a rel="nofollow">3</a></li><li title="下一页" tabindex="0" class="rc-pagination-next" aria-disabled="false"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li></ul><ul class="rc-pagination"><li title="上一页" class="rc-pagination-prev rc-pagination-disabled" aria-disabled="true"><button type="button" aria-label="prev page" class="rc-pagination-item-link" disabled=""></button></li><li title="1" class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-active" tabindex="0"><a rel="nofollow">1</a></li><li title="2" class="rc-pagination-item rc-pagination-item-2" tabindex="0"><a rel="nofollow">2</a></li><li title="3" class="rc-pagination-item rc-pagination-item-3" tabindex="0"><a rel="nofollow">3</a></li><li title="4" class="rc-pagination-item rc-pagination-item-4" tabindex="0"><a rel="nofollow">4</a></li><li title="5" class="rc-pagination-item rc-pagination-item-5" tabindex="0"><a rel="nofollow">5</a></li><li title="下一页" tabindex="0" class="rc-pagination-next" aria-disabled="false"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li></ul><ul class="rc-pagination"><li title="上一页" class="rc-pagination-prev rc-pagination-disabled" aria-disabled="true"><button type="button" aria-label="prev page" class="rc-pagination-item-link" disabled=""></button></li><li title="1" class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-active" tabindex="0"><a rel="nofollow">1</a></li><li title="2" class="rc-pagination-item rc-pagination-item-2" tabindex="0"><a rel="nofollow">2</a></li><li title="3" class="rc-pagination-item rc-pagination-item-3" tabindex="0"><a rel="nofollow">3</a></li><li title="4" class="rc-pagination-item rc-pagination-item-4" tabindex="0"><a rel="nofollow">4</a></li><li title="5" class="rc-pagination-item rc-pagination-item-5" tabindex="0"><a rel="nofollow">5</a></li><li title="6" class="rc-pagination-item rc-pagination-item-6" tabindex="0"><a rel="nofollow">6</a></li><li title="下一页" tabindex="0" class="rc-pagination-next" aria-disabled="false"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li class="rc-pagination-options"></li></ul><ul class="rc-pagination"><li title="上一页" class="rc-pagination-prev rc-pagination-disabled" aria-disabled="true"><button type="button" aria-label="prev page" class="rc-pagination-item-link" disabled=""></button></li><li title="1" class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-active" tabindex="0"><a rel="nofollow">1</a></li><li title="2" class="rc-pagination-item rc-pagination-item-2" tabindex="0"><a rel="nofollow">2</a></li><li title="3" class="rc-pagination-item rc-pagination-item-3" tabindex="0"><a rel="nofollow">3</a></li><li title="4" class="rc-pagination-item rc-pagination-item-4" tabindex="0"><a rel="nofollow">4</a></li><li title="5" class="rc-pagination-item rc-pagination-item-5" tabindex="0"><a rel="nofollow">5</a></li><li title="6" class="rc-pagination-item rc-pagination-item-6" tabindex="0"><a rel="nofollow">6</a></li><li title="7" class="rc-pagination-item rc-pagination-item-7" tabindex="0"><a rel="nofollow">7</a></li><li title="下一页" tabindex="0" class="rc-pagination-next" aria-disabled="false"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li class="rc-pagination-options"></li></ul><ul class="rc-pagination"><li title="上一页" class="rc-pagination-prev rc-pagination-disabled" aria-disabled="true"><button type="button" aria-label="prev page" class="rc-pagination-item-link" disabled=""></button></li><li title="1" class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-active" tabindex="0"><a rel="nofollow">1</a></li><li title="2" class="rc-pagination-item rc-pagination-item-2" tabindex="0"><a rel="nofollow">2</a></li><li title="3" class="rc-pagination-item rc-pagination-item-3" tabindex="0"><a rel="nofollow">3</a></li><li title="4" class="rc-pagination-item rc-pagination-item-4" tabindex="0"><a rel="nofollow">4</a></li><li title="5" class="rc-pagination-item rc-pagination-item-5 rc-pagination-item-before-jump-next" tabindex="0"><a rel="nofollow">5</a></li><li title="向后 5 页" tabindex="0" class="rc-pagination-jump-next"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li title="8" class="rc-pagination-item rc-pagination-item-8" tabindex="0"><a rel="nofollow">8</a></li><li title="下一页" tabindex="0" class="rc-pagination-next" aria-disabled="false"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li class="rc-pagination-options"></li></ul><ul class="rc-pagination"><li title="上一页" class="rc-pagination-prev rc-pagination-disabled" aria-disabled="true"><button type="button" aria-label="prev page" class="rc-pagination-item-link" disabled=""></button></li><li title="1" class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-active" tabindex="0"><a rel="nofollow">1</a></li><li title="2" class="rc-pagination-item rc-pagination-item-2" tabindex="0"><a rel="nofollow">2</a></li><li title="3" class="rc-pagination-item rc-pagination-item-3" tabindex="0"><a rel="nofollow">3</a></li><li title="4" class="rc-pagination-item rc-pagination-item-4" tabindex="0"><a rel="nofollow">4</a></li><li title="5" class="rc-pagination-item rc-pagination-item-5 rc-pagination-item-before-jump-next" tabindex="0"><a rel="nofollow">5</a></li><li title="向后 5 页" tabindex="0" class="rc-pagination-jump-next"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li title="9" class="rc-pagination-item rc-pagination-item-9" tabindex="0"><a rel="nofollow">9</a></li><li title="下一页" tabindex="0" class="rc-pagination-next" aria-disabled="false"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li class="rc-pagination-options"></li></ul><ul class="rc-pagination"><li title="上一页" class="rc-pagination-prev rc-pagination-disabled" aria-disabled="true"><button type="button" aria-label="prev page" class="rc-pagination-item-link" disabled=""></button></li><li title="1" class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-active" tabindex="0"><a rel="nofollow">1</a></li><li title="2" class="rc-pagination-item rc-pagination-item-2" tabindex="0"><a rel="nofollow">2</a></li><li title="3" class="rc-pagination-item rc-pagination-item-3" tabindex="0"><a rel="nofollow">3</a></li><li title="4" class="rc-pagination-item rc-pagination-item-4" tabindex="0"><a rel="nofollow">4</a></li><li title="5" class="rc-pagination-item rc-pagination-item-5 rc-pagination-item-before-jump-next" tabindex="0"><a rel="nofollow">5</a></li><li title="向后 5 页" tabindex="0" class="rc-pagination-jump-next"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li title="10" class="rc-pagination-item rc-pagination-item-10" tabindex="0"><a rel="nofollow">10</a></li><li title="下一页" tabindex="0" class="rc-pagination-next" aria-disabled="false"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li class="rc-pagination-options"></li></ul><ul class="rc-pagination"><li title="上一页" class="rc-pagination-prev rc-pagination-disabled" aria-disabled="true"><button type="button" aria-label="prev page" class="rc-pagination-item-link" disabled=""></button></li><li title="1" class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-active" tabindex="0"><a rel="nofollow">1</a></li><li title="2" class="rc-pagination-item rc-pagination-item-2" tabindex="0"><a rel="nofollow">2</a></li><li title="3" class="rc-pagination-item rc-pagination-item-3" tabindex="0"><a rel="nofollow">3</a></li><li title="4" class="rc-pagination-item rc-pagination-item-4" tabindex="0"><a rel="nofollow">4</a></li><li title="5" class="rc-pagination-item rc-pagination-item-5 rc-pagination-item-before-jump-next" tabindex="0"><a rel="nofollow">5</a></li><li title="向后 5 页" tabindex="0" class="rc-pagination-jump-next"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li title="12" class="rc-pagination-item rc-pagination-item-12" tabindex="0"><a rel="nofollow">12</a></li><li title="下一页" tabindex="0" class="rc-pagination-next" aria-disabled="false"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li class="rc-pagination-options"></li></ul><ul class="rc-pagination"><li title="上一页" class="rc-pagination-prev rc-pagination-disabled" aria-disabled="true"><button type="button" aria-label="prev page" class="rc-pagination-item-link" disabled=""></button></li><li title="1" class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-active" tabindex="0"><a rel="nofollow">1</a></li><li title="2" class="rc-pagination-item rc-pagination-item-2" tabindex="0"><a rel="nofollow">2</a></li><li title="3" class="rc-pagination-item rc-pagination-item-3" tabindex="0"><a rel="nofollow">3</a></li><li title="4" class="rc-pagination-item rc-pagination-item-4" tabindex="0"><a rel="nofollow">4</a></li><li title="5" class="rc-pagination-item rc-pagination-item-5 rc-pagination-item-before-jump-next" tabindex="0"><a rel="nofollow">5</a></li><li title="向后 5 页" tabindex="0" class="rc-pagination-jump-next"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li title="50" class="rc-pagination-item rc-pagination-item-50" tabindex="0"><a rel="nofollow">50</a></li><li title="下一页" tabindex="0" class="rc-pagination-next" aria-disabled="false"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li class="rc-pagination-options"></li></ul>"`;
+
+exports[`Example controlled 1`] = `"<ul class="rc-pagination"><li title="上一页" class="rc-pagination-prev rc-pagination-disabled" aria-disabled="true"><button type="button" aria-label="prev page" class="rc-pagination-item-link" disabled=""></button></li><li title="1" class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-active" tabindex="0"><a rel="nofollow">1</a></li><li title="2" class="rc-pagination-item rc-pagination-item-2" tabindex="0"><a rel="nofollow">2</a></li><li title="3" class="rc-pagination-item rc-pagination-item-3" tabindex="0"><a rel="nofollow">3</a></li><li title="下一页" tabindex="0" class="rc-pagination-next" aria-disabled="false"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li></ul>"`;
+
+exports[`Example itemRender 1`] = `"<ul class="rc-pagination"><li title="上一页" class="rc-pagination-prev rc-pagination-disabled" aria-disabled="true"><button type="button" aria-label="prev page" class="rc-pagination-item-link" disabled=""></button></li><li title="1" class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-active" tabindex="0"><a href="#1">1</a></li><li title="2" class="rc-pagination-item rc-pagination-item-2" tabindex="0"><a href="#2">2</a></li><li title="3" class="rc-pagination-item rc-pagination-item-3" tabindex="0"><a href="#3">3</a></li><li title="4" class="rc-pagination-item rc-pagination-item-4" tabindex="0"><a href="#4">4</a></li><li title="5" class="rc-pagination-item rc-pagination-item-5 rc-pagination-item-before-jump-next" tabindex="0"><a href="#5">5</a></li><li title="向后 5 页" tabindex="0" class="rc-pagination-jump-next"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li title="10" class="rc-pagination-item rc-pagination-item-10" tabindex="0"><a href="#10">10</a></li><li title="下一页" tabindex="0" class="rc-pagination-next" aria-disabled="false"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li class="rc-pagination-options"></li></ul><ul class="rc-pagination"><li title="上一页" class="rc-pagination-prev rc-pagination-disabled" aria-disabled="true">Prev</li><li title="1" class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-active" tabindex="0"><a rel="nofollow">1</a></li><li title="2" class="rc-pagination-item rc-pagination-item-2" tabindex="0"><a rel="nofollow">2</a></li><li title="3" class="rc-pagination-item rc-pagination-item-3" tabindex="0"><a rel="nofollow">3</a></li><li title="4" class="rc-pagination-item rc-pagination-item-4" tabindex="0"><a rel="nofollow">4</a></li><li title="5" class="rc-pagination-item rc-pagination-item-5 rc-pagination-item-before-jump-next" tabindex="0"><a rel="nofollow">5</a></li><li title="向后 5 页" tabindex="0" class="rc-pagination-jump-next"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li title="10" class="rc-pagination-item rc-pagination-item-10" tabindex="0"><a rel="nofollow">10</a></li><li title="下一页" tabindex="0" class="rc-pagination-next" aria-disabled="false">Next</li><li class="rc-pagination-options"></li></ul><ul class="rc-pagination"><li title="上一页" class="rc-pagination-prev rc-pagination-disabled" aria-disabled="true"><button type="button" disabled="">Prev</button></li><li title="1" class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-active" tabindex="0"><a rel="nofollow">1</a></li><li title="2" class="rc-pagination-item rc-pagination-item-2" tabindex="0"><a rel="nofollow">2</a></li><li title="3" class="rc-pagination-item rc-pagination-item-3" tabindex="0"><a rel="nofollow">3</a></li><li title="4" class="rc-pagination-item rc-pagination-item-4" tabindex="0"><a rel="nofollow">4</a></li><li title="5" class="rc-pagination-item rc-pagination-item-5 rc-pagination-item-before-jump-next" tabindex="0"><a rel="nofollow">5</a></li><li title="向后 5 页" tabindex="0" class="rc-pagination-jump-next"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li title="10" class="rc-pagination-item rc-pagination-item-10" tabindex="0"><a rel="nofollow">10</a></li><li title="下一页" tabindex="0" class="rc-pagination-next" aria-disabled="false"><button type="button">Next</button></li><li class="rc-pagination-options"></li></ul><ul class="rc-pagination"><li title="上一页" class="rc-pagination-prev rc-pagination-disabled" aria-disabled="true"><div disabled="">Prev</div></li><li title="1" class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-active" tabindex="0"><a rel="nofollow">1</a></li><li title="2" class="rc-pagination-item rc-pagination-item-2" tabindex="0"><a rel="nofollow">2</a></li><li title="3" class="rc-pagination-item rc-pagination-item-3" tabindex="0"><a rel="nofollow">3</a></li><li title="4" class="rc-pagination-item rc-pagination-item-4" tabindex="0"><a rel="nofollow">4</a></li><li title="5" class="rc-pagination-item rc-pagination-item-5 rc-pagination-item-before-jump-next" tabindex="0"><a rel="nofollow">5</a></li><li title="向后 5 页" tabindex="0" class="rc-pagination-jump-next"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li title="10" class="rc-pagination-item rc-pagination-item-10" tabindex="0"><a rel="nofollow">10</a></li><li title="下一页" tabindex="0" class="rc-pagination-next" aria-disabled="false"><div>Next</div></li><li class="rc-pagination-options"></li></ul>"`;
+
+exports[`Example jumper 1`] = `"<h3>默认</h3><ul class="rc-pagination"><li title="上一页" tabindex="0" class="rc-pagination-prev" aria-disabled="false"><button type="button" aria-label="prev page" class="rc-pagination-item-link"></button></li><li title="1" class="rc-pagination-item rc-pagination-item-1" tabindex="0"><a rel="nofollow">1</a></li><li title="向前 5 页" tabindex="0" class="rc-pagination-jump-prev"><button type="button" aria-label="prev page" class="rc-pagination-item-link"></button></li><li title="3" class="rc-pagination-item rc-pagination-item-3 rc-pagination-item-after-jump-prev" tabindex="0"><a rel="nofollow">3</a></li><li title="4" class="rc-pagination-item rc-pagination-item-4" tabindex="0"><a rel="nofollow">4</a></li><li title="5" class="rc-pagination-item rc-pagination-item-5 rc-pagination-item-active" tabindex="0"><a rel="nofollow">5</a></li><li title="6" class="rc-pagination-item rc-pagination-item-6" tabindex="0"><a rel="nofollow">6</a></li><li title="7" class="rc-pagination-item rc-pagination-item-7 rc-pagination-item-before-jump-next" tabindex="0"><a rel="nofollow">7</a></li><li title="向后 5 页" tabindex="0" class="rc-pagination-jump-next"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li title="23" class="rc-pagination-item rc-pagination-item-23" tabindex="0"><a rel="nofollow">23</a></li><li title="下一页" tabindex="0" class="rc-pagination-next" aria-disabled="false"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li class="rc-pagination-options"><div class="rc-select rc-pagination-options-size-changer rc-select-single" aria-label="页码"><div class="rc-select-selector"><span class="rc-select-selection-search"><input type="search" autocomplete="off" class="rc-select-selection-search-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-label="页码" readonly="" unselectable="on" style="opacity: 0;" value="" id="rc_select_TEST_OR_SSR"></span><span class="rc-select-selection-item" title="20 条/页">20 条/页</span></div></div><div class="rc-pagination-options-quick-jumper">跳至<input type="text" aria-label="页" value="">页</div></li></ul><h3>禁用</h3><ul class="rc-pagination rc-pagination-disabled"><li title="上一页" tabindex="0" class="rc-pagination-prev" aria-disabled="false"><button type="button" aria-label="prev page" class="rc-pagination-item-link"></button></li><li title="1" class="rc-pagination-item rc-pagination-item-1" tabindex="0"><a rel="nofollow">1</a></li><li title="向前 5 页" tabindex="0" class="rc-pagination-jump-prev"><button type="button" aria-label="prev page" class="rc-pagination-item-link"></button></li><li title="3" class="rc-pagination-item rc-pagination-item-3 rc-pagination-item-after-jump-prev" tabindex="0"><a rel="nofollow">3</a></li><li title="4" class="rc-pagination-item rc-pagination-item-4" tabindex="0"><a rel="nofollow">4</a></li><li title="5" class="rc-pagination-item rc-pagination-item-5 rc-pagination-item-active" tabindex="0"><a rel="nofollow">5</a></li><li title="6" class="rc-pagination-item rc-pagination-item-6" tabindex="0"><a rel="nofollow">6</a></li><li title="7" class="rc-pagination-item rc-pagination-item-7 rc-pagination-item-before-jump-next" tabindex="0"><a rel="nofollow">7</a></li><li title="向后 5 页" tabindex="0" class="rc-pagination-jump-next"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li title="23" class="rc-pagination-item rc-pagination-item-23" tabindex="0"><a rel="nofollow">23</a></li><li title="下一页" tabindex="0" class="rc-pagination-next" aria-disabled="false"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li class="rc-pagination-options"><div class="rc-select rc-pagination-options-size-changer rc-select-single rc-select-disabled" aria-label="页码"><div class="rc-select-selector"><span class="rc-select-selection-search"><input type="search" disabled="" autocomplete="off" class="rc-select-selection-search-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-label="页码" readonly="" unselectable="on" style="opacity: 0;" value="" id="rc_select_TEST_OR_SSR"></span><span class="rc-select-selection-item" title="20 条/页">20 条/页</span></div></div><div class="rc-pagination-options-quick-jumper">跳至<input disabled="" type="text" aria-label="页" value="">页</div></li></ul><h3>单页默认隐藏</h3><ul class="rc-pagination"><li title="上一页" class="rc-pagination-prev rc-pagination-disabled" aria-disabled="true"><button type="button" aria-label="prev page" class="rc-pagination-item-link" disabled=""></button></li><li title="1" class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-active" tabindex="0"><a rel="nofollow">1</a></li><li title="下一页" class="rc-pagination-next rc-pagination-disabled" aria-disabled="true"><button type="button" aria-label="next page" class="rc-pagination-item-link" disabled=""></button></li><li class="rc-pagination-options"><div class="rc-select rc-pagination-options-size-changer rc-select-single" aria-label="页码"><div class="rc-select-selector"><span class="rc-select-selection-search"><input type="search" autocomplete="off" class="rc-select-selection-search-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-label="页码" readonly="" unselectable="on" style="opacity: 0;" value="" id="rc_select_TEST_OR_SSR"></span><span class="rc-select-selection-item" title="10 条/页">10 条/页</span></div></div></li></ul><br><ul class="rc-pagination"><li title="上一页" class="rc-pagination-prev rc-pagination-disabled" aria-disabled="true"><button type="button" aria-label="prev page" class="rc-pagination-item-link" disabled=""></button></li><li title="1" class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-active" tabindex="0"><a rel="nofollow">1</a></li><li title="下一页" class="rc-pagination-next rc-pagination-disabled" aria-disabled="true"><button type="button" aria-label="next page" class="rc-pagination-item-link" disabled=""></button></li><li class="rc-pagination-options"><div class="rc-select rc-pagination-options-size-changer rc-select-single" aria-label="页码"><div class="rc-select-selector"><span class="rc-select-selection-search"><input type="search" autocomplete="off" class="rc-select-selection-search-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-label="页码" readonly="" unselectable="on" style="opacity: 0;" value="" id="rc_select_TEST_OR_SSR"></span><span class="rc-select-selection-item" title="10 条/页">10 条/页</span></div></div></li></ul>"`;
+
+exports[`Example jumperWithGoButton 1`] = `"<p> customize node </p><ul class="rc-pagination"><li title="上一页" tabindex="0" class="rc-pagination-prev" aria-disabled="false"><button type="button" aria-label="prev page" class="rc-pagination-item-link"></button></li><li title="1" class="rc-pagination-item rc-pagination-item-1" tabindex="0"><a rel="nofollow">1</a></li><li title="向前 5 页" tabindex="0" class="rc-pagination-jump-prev"><button type="button" aria-label="prev page" class="rc-pagination-item-link"></button></li><li title="3" class="rc-pagination-item rc-pagination-item-3 rc-pagination-item-after-jump-prev" tabindex="0"><a rel="nofollow">3</a></li><li title="4" class="rc-pagination-item rc-pagination-item-4" tabindex="0"><a rel="nofollow">4</a></li><li title="5" class="rc-pagination-item rc-pagination-item-5 rc-pagination-item-active" tabindex="0"><a rel="nofollow">5</a></li><li title="6" class="rc-pagination-item rc-pagination-item-6" tabindex="0"><a rel="nofollow">6</a></li><li title="7" class="rc-pagination-item rc-pagination-item-7 rc-pagination-item-before-jump-next" tabindex="0"><a rel="nofollow">7</a></li><li title="向后 5 页" tabindex="0" class="rc-pagination-jump-next"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li title="23" class="rc-pagination-item rc-pagination-item-23" tabindex="0"><a rel="nofollow">23</a></li><li title="下一页" tabindex="0" class="rc-pagination-next" aria-disabled="false"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li class="rc-pagination-options"><div class="rc-select rc-pagination-options-size-changer rc-select-single" aria-label="页码"><div class="rc-select-selector"><span class="rc-select-selection-search"><input type="search" autocomplete="off" class="rc-select-selection-search-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-label="页码" readonly="" unselectable="on" style="opacity: 0;" value="" id="rc_select_TEST_OR_SSR"></span><span class="rc-select-selection-item" title="20 条/页">20 条/页</span></div></div><div class="rc-pagination-options-quick-jumper">跳至<input type="text" aria-label="页" value="">页<span><button type="button">确定</button></span></div></li></ul><p> default node </p><ul class="rc-pagination rc-pagination-simple"><li title="上一页" class="rc-pagination-prev rc-pagination-disabled" aria-disabled="true"><button type="button" aria-label="prev page" class="rc-pagination-item-link" disabled=""></button></li><li title="1/5" class="rc-pagination-simple-pager"><input type="text" size="3" value="1"><span class="rc-pagination-slash">/</span>5</li><li title="下一页" class="rc-pagination-next" aria-disabled="false"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li class="rc-pagination-options"><div class="rc-pagination-options-quick-jumper">跳至<input type="text" aria-label="页" value="">页<span><li title="跳至1/5" class="rc-pagination-simple-pager"><button type="button">确定</button></li></span></div></li></ul>"`;
+
+exports[`Example lessPages 1`] = `"<div><ul class="rc-pagination" style="margin-bottom: 2rem;"><li title="上一页" tabindex="0" class="rc-pagination-prev" aria-disabled="false"><i class="custom-icon-prev" style="font-size: 16px;"><svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor" style="vertical-align: -.125em; transform: rotate(180deg);"><path d="M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-0.7 5.2-2L869 536.2c14.7-12.8 14.7-35.6 0-48.4z"></path></svg></i></li><li title="1" class="rc-pagination-item rc-pagination-item-1" tabindex="0"><a rel="nofollow">1</a></li><li title="2" class="rc-pagination-item rc-pagination-item-2" tabindex="0"><a rel="nofollow">2</a></li><li title="3" class="rc-pagination-item rc-pagination-item-3 rc-pagination-item-active" tabindex="0"><a rel="nofollow">3</a></li><li title="4" class="rc-pagination-item rc-pagination-item-4 rc-pagination-item-before-jump-next" tabindex="0"><a rel="nofollow">4</a></li><li title="向后 3 页" tabindex="0" class="rc-pagination-jump-next rc-pagination-jump-next-custom-icon"><i class="custom-icon-jump-next" style="font-size: 16px;"><svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor" style="vertical-align: -.125em; transform: rotate(0deg);"><path d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1c-4.1 5.2-0.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"></path><path d="M837.2 492.3L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1c-4.1 5.2-0.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"></path></svg></i></li><li title="8" class="rc-pagination-item rc-pagination-item-8" tabindex="0"><a rel="nofollow">8</a></li><li title="下一页" tabindex="0" class="rc-pagination-next" aria-disabled="false"><i class="custom-icon-next" style="font-size: 16px;"><svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor" style="vertical-align: -.125em; transform: rotate(0deg);"><path d="M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-0.7 5.2-2L869 536.2c14.7-12.8 14.7-35.6 0-48.4z"></path></svg></i></li><li class="rc-pagination-options"></li></ul><ul class="rc-pagination"><li title="上一页" class="rc-pagination-prev rc-pagination-disabled" aria-disabled="true"><i class="custom-icon-prev" style="font-size: 16px;" disabled=""><svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor" style="vertical-align: -.125em; transform: rotate(180deg);"><path d="M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-0.7 5.2-2L869 536.2c14.7-12.8 14.7-35.6 0-48.4z"></path></svg></i></li><li title="1" class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-active" tabindex="0"><a rel="nofollow">1</a></li><li title="2" class="rc-pagination-item rc-pagination-item-2" tabindex="0"><a rel="nofollow">2</a></li><li title="3" class="rc-pagination-item rc-pagination-item-3 rc-pagination-item-before-jump-next" tabindex="0"><a rel="nofollow">3</a></li><li title="向后 3 页" tabindex="0" class="rc-pagination-jump-next rc-pagination-jump-next-custom-icon"><i class="custom-icon-jump-next" style="font-size: 16px;"><svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor" style="vertical-align: -.125em; transform: rotate(0deg);"><path d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1c-4.1 5.2-0.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"></path><path d="M837.2 492.3L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1c-4.1 5.2-0.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"></path></svg></i></li><li title="6" class="rc-pagination-item rc-pagination-item-6" tabindex="0"><a rel="nofollow">6</a></li><li title="下一页" tabindex="0" class="rc-pagination-next" aria-disabled="false"><i class="custom-icon-next" style="font-size: 16px;"><svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor" style="vertical-align: -.125em; transform: rotate(0deg);"><path d="M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-0.7 5.2-2L869 536.2c14.7-12.8 14.7-35.6 0-48.4z"></path></svg></i></li><li class="rc-pagination-options"></li></ul><div><button>Toggle Custom Icon</button><span style="margin-left: 1rem;">Is using icon: true</span></div></div>"`;
+
+exports[`Example locale 1`] = `"<ul class="rc-pagination"><li title="Previous Page" tabindex="0" class="rc-pagination-prev" aria-disabled="false"><button type="button" aria-label="prev page" class="rc-pagination-item-link"></button></li><li title="1" class="rc-pagination-item rc-pagination-item-1" tabindex="0"><a rel="nofollow">1</a></li><li title="Previous 5 Pages" tabindex="0" class="rc-pagination-jump-prev"><button type="button" aria-label="prev page" class="rc-pagination-item-link"></button></li><li title="3" class="rc-pagination-item rc-pagination-item-3 rc-pagination-item-after-jump-prev" tabindex="0"><a rel="nofollow">3</a></li><li title="4" class="rc-pagination-item rc-pagination-item-4" tabindex="0"><a rel="nofollow">4</a></li><li title="5" class="rc-pagination-item rc-pagination-item-5 rc-pagination-item-active" tabindex="0"><a rel="nofollow">5</a></li><li title="6" class="rc-pagination-item rc-pagination-item-6" tabindex="0"><a rel="nofollow">6</a></li><li title="7" class="rc-pagination-item rc-pagination-item-7 rc-pagination-item-before-jump-next" tabindex="0"><a rel="nofollow">7</a></li><li title="Next 5 Pages" tabindex="0" class="rc-pagination-jump-next"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li title="23" class="rc-pagination-item rc-pagination-item-23" tabindex="0"><a rel="nofollow">23</a></li><li title="Next Page" tabindex="0" class="rc-pagination-next" aria-disabled="false"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li class="rc-pagination-options"><div class="rc-select rc-pagination-options-size-changer rc-select-single" aria-label="Page Size"><div class="rc-select-selector"><span class="rc-select-selection-search"><input type="search" autocomplete="off" class="rc-select-selection-search-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-label="Page Size" readonly="" unselectable="on" style="opacity: 0;" value="" id="rc_select_TEST_OR_SSR"></span><span class="rc-select-selection-item" title="20 / page">20 / page</span></div></div><div class="rc-pagination-options-quick-jumper">Go to<input type="text" aria-label="Page" value="">Page</div></li></ul>"`;
+
+exports[`Example more 1`] = `"<ul class="rc-pagination ant-pagination"><li title="上一页" tabindex="0" class="rc-pagination-prev" aria-disabled="false"><button type="button" aria-label="prev page" class="rc-pagination-item-link"></button></li><li title="1" class="rc-pagination-item rc-pagination-item-1" tabindex="0"><a rel="nofollow">1</a></li><li title="2" class="rc-pagination-item rc-pagination-item-2" tabindex="0"><a rel="nofollow">2</a></li><li title="3" class="rc-pagination-item rc-pagination-item-3 rc-pagination-item-active" tabindex="0"><a rel="nofollow">3</a></li><li title="4" class="rc-pagination-item rc-pagination-item-4" tabindex="0"><a rel="nofollow">4</a></li><li title="5" class="rc-pagination-item rc-pagination-item-5 rc-pagination-item-before-jump-next" tabindex="0"><a rel="nofollow">5</a></li><li title="向后 5 页" tabindex="0" class="rc-pagination-jump-next"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li title="45" class="rc-pagination-item rc-pagination-item-45" tabindex="0"><a rel="nofollow">45</a></li><li title="下一页" tabindex="0" class="rc-pagination-next" aria-disabled="false"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li class="rc-pagination-options"></li></ul>"`;
+
+exports[`Example showTitle 1`] = `"<div><ul class="rc-pagination"><li tabindex="0" class="rc-pagination-prev" aria-disabled="false"><button type="button" aria-label="prev page" class="rc-pagination-item-link"></button></li><li class="rc-pagination-item rc-pagination-item-1" tabindex="0"><a rel="nofollow">1</a></li><li class="rc-pagination-item rc-pagination-item-2" tabindex="0"><a rel="nofollow">2</a></li><li class="rc-pagination-item rc-pagination-item-3 rc-pagination-item-active" tabindex="0"><a rel="nofollow">3</a></li><li class="rc-pagination-item rc-pagination-item-4 rc-pagination-item-before-jump-next" tabindex="0"><a rel="nofollow">4</a></li><li tabindex="0" class="rc-pagination-jump-next"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li class="rc-pagination-item rc-pagination-item-8" tabindex="0"><a rel="nofollow">8</a></li><li tabindex="0" class="rc-pagination-next" aria-disabled="false"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li class="rc-pagination-options"></li></ul><ul class="rc-pagination"><li class="rc-pagination-prev rc-pagination-disabled" aria-disabled="true"><button type="button" aria-label="prev page" class="rc-pagination-item-link" disabled=""></button></li><li class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-active" tabindex="0"><a rel="nofollow">1</a></li><li class="rc-pagination-item rc-pagination-item-2" tabindex="0"><a rel="nofollow">2</a></li><li class="rc-pagination-item rc-pagination-item-3 rc-pagination-item-before-jump-next" tabindex="0"><a rel="nofollow">3</a></li><li tabindex="0" class="rc-pagination-jump-next"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li class="rc-pagination-item rc-pagination-item-6" tabindex="0"><a rel="nofollow">6</a></li><li tabindex="0" class="rc-pagination-next" aria-disabled="false"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li class="rc-pagination-options"></li></ul></div>"`;
+
+exports[`Example showTotal 1`] = `"<ul class="rc-pagination"><li class="rc-pagination-total-text">Total 455 items</li><li title="上一页" class="rc-pagination-prev rc-pagination-disabled" aria-disabled="true"><button type="button" aria-label="prev page" class="rc-pagination-item-link" disabled=""></button></li><li title="1" class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-active" tabindex="0"><a rel="nofollow">1</a></li><li title="2" class="rc-pagination-item rc-pagination-item-2" tabindex="0"><a rel="nofollow">2</a></li><li title="3" class="rc-pagination-item rc-pagination-item-3" tabindex="0"><a rel="nofollow">3</a></li><li title="4" class="rc-pagination-item rc-pagination-item-4" tabindex="0"><a rel="nofollow">4</a></li><li title="5" class="rc-pagination-item rc-pagination-item-5 rc-pagination-item-before-jump-next" tabindex="0"><a rel="nofollow">5</a></li><li title="向后 5 页" tabindex="0" class="rc-pagination-jump-next"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li title="46" class="rc-pagination-item rc-pagination-item-46" tabindex="0"><a rel="nofollow">46</a></li><li title="下一页" tabindex="0" class="rc-pagination-next" aria-disabled="false"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li class="rc-pagination-options"></li></ul><br><ul class="rc-pagination"><li class="rc-pagination-total-text">1 - 10 of 455 items</li><li title="上一页" class="rc-pagination-prev rc-pagination-disabled" aria-disabled="true"><button type="button" aria-label="prev page" class="rc-pagination-item-link" disabled=""></button></li><li title="1" class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-active" tabindex="0"><a rel="nofollow">1</a></li><li title="2" class="rc-pagination-item rc-pagination-item-2" tabindex="0"><a rel="nofollow">2</a></li><li title="3" class="rc-pagination-item rc-pagination-item-3" tabindex="0"><a rel="nofollow">3</a></li><li title="4" class="rc-pagination-item rc-pagination-item-4" tabindex="0"><a rel="nofollow">4</a></li><li title="5" class="rc-pagination-item rc-pagination-item-5 rc-pagination-item-before-jump-next" tabindex="0"><a rel="nofollow">5</a></li><li title="向后 5 页" tabindex="0" class="rc-pagination-jump-next"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li title="46" class="rc-pagination-item rc-pagination-item-46" tabindex="0"><a rel="nofollow">46</a></li><li title="下一页" tabindex="0" class="rc-pagination-next" aria-disabled="false"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li class="rc-pagination-options"></li></ul><br><ul class="rc-pagination"><li class="rc-pagination-total-text">0 - 0 of 0 items</li><li title="上一页" class="rc-pagination-prev rc-pagination-disabled" aria-disabled="true"><button type="button" aria-label="prev page" class="rc-pagination-item-link" disabled=""></button></li><li title="1" class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-disabled" tabindex="0"><a rel="nofollow">1</a></li><li title="下一页" class="rc-pagination-next rc-pagination-disabled" aria-disabled="true"><button type="button" aria-label="next page" class="rc-pagination-item-link" disabled=""></button></li></ul>"`;
+
+exports[`Example simple 1`] = `"<ul class="rc-pagination rc-pagination-simple"><li title="上一页" class="rc-pagination-prev rc-pagination-disabled" aria-disabled="true"><button type="button" aria-label="prev page" class="rc-pagination-item-link" disabled=""></button></li><li title="1/5" class="rc-pagination-simple-pager"><input type="text" size="3" value="1"><span class="rc-pagination-slash">/</span>5</li><li title="下一页" class="rc-pagination-next" aria-disabled="false"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li></ul><br><ul class="rc-pagination rc-pagination-simple"><li class="rc-pagination-total-text">Total 50 items</li><li title="上一页" class="rc-pagination-prev rc-pagination-disabled" aria-disabled="true"><button type="button" aria-label="prev page" class="rc-pagination-item-link" disabled=""></button></li><li title="1/5" class="rc-pagination-simple-pager"><input type="text" size="3" value="1"><span class="rc-pagination-slash">/</span>5</li><li title="下一页" class="rc-pagination-next" aria-disabled="false"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li></ul><br><ul class="rc-pagination rc-pagination-simple"><li title="上一页" class="rc-pagination-prev rc-pagination-disabled" aria-disabled="true"><button type="button" aria-label="prev page" class="rc-pagination-item-link" disabled=""></button></li><li title="1/5" class="rc-pagination-simple-pager"><input type="text" size="3" value="1"><span class="rc-pagination-slash">/</span>5</li><li title="下一页" class="rc-pagination-next" aria-disabled="false"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li class="rc-pagination-options"><div class="rc-select rc-pagination-options-size-changer rc-select-single" aria-label="页码"><div class="rc-select-selector"><span class="rc-select-selection-search"><input type="search" autocomplete="off" class="rc-select-selection-search-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-label="页码" readonly="" unselectable="on" style="opacity: 0;" value="" id="rc_select_TEST_OR_SSR"></span><span class="rc-select-selection-item" title="10 条/页">10 条/页</span></div></div></li></ul>"`;
+
+exports[`Example sizer 1`] = `"<div style="margin: 10px;"><ul class="rc-pagination"><li title="上一页" tabindex="0" class="rc-pagination-prev" aria-disabled="false"><button type="button" aria-label="prev page" class="rc-pagination-item-link"></button></li><li title="1" class="rc-pagination-item rc-pagination-item-1" tabindex="0"><a rel="nofollow">1</a></li><li title="2" class="rc-pagination-item rc-pagination-item-2" tabindex="0"><a rel="nofollow">2</a></li><li title="3" class="rc-pagination-item rc-pagination-item-3 rc-pagination-item-active" tabindex="0"><a rel="nofollow">3</a></li><li title="下一页" class="rc-pagination-next rc-pagination-disabled" aria-disabled="true"><button type="button" aria-label="next page" class="rc-pagination-item-link" disabled=""></button></li><li class="rc-pagination-options"><div class="rc-select rc-pagination-options-size-changer rc-select-single" aria-label="页码"><div class="rc-select-selector"><span class="rc-select-selection-search"><input type="search" autocomplete="off" class="rc-select-selection-search-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-label="页码" readonly="" unselectable="on" style="opacity: 0;" value="" id="rc_select_TEST_OR_SSR"></span><span class="rc-select-selection-item" title="15 条/页">15 条/页</span></div></div></li></ul><ul class="rc-pagination"><li title="上一页" tabindex="0" class="rc-pagination-prev" aria-disabled="false"><button type="button" aria-label="prev page" class="rc-pagination-item-link"></button></li><li title="1" class="rc-pagination-item rc-pagination-item-1" tabindex="0"><a rel="nofollow">1</a></li><li title="2" class="rc-pagination-item rc-pagination-item-2" tabindex="0"><a rel="nofollow">2</a></li><li title="3" class="rc-pagination-item rc-pagination-item-3 rc-pagination-item-active" tabindex="0"><a rel="nofollow">3</a></li><li title="4" class="rc-pagination-item rc-pagination-item-4" tabindex="0"><a rel="nofollow">4</a></li><li title="下一页" tabindex="0" class="rc-pagination-next" aria-disabled="false"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li></ul><ul class="rc-pagination"><li title="上一页" tabindex="0" class="rc-pagination-prev" aria-disabled="false"><button type="button" aria-label="prev page" class="rc-pagination-item-link"></button></li><li title="1" class="rc-pagination-item rc-pagination-item-1" tabindex="0"><a rel="nofollow">1</a></li><li title="2" class="rc-pagination-item rc-pagination-item-2" tabindex="0"><a rel="nofollow">2</a></li><li title="3" class="rc-pagination-item rc-pagination-item-3 rc-pagination-item-active" tabindex="0"><a rel="nofollow">3</a></li><li title="4" class="rc-pagination-item rc-pagination-item-4" tabindex="0"><a rel="nofollow">4</a></li><li title="下一页" tabindex="0" class="rc-pagination-next" aria-disabled="false"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li><li class="rc-pagination-options"><div class="rc-select rc-pagination-options-size-changer rc-select-single" aria-label="页码"><div class="rc-select-selector"><span class="rc-select-selection-search"><input type="search" autocomplete="off" class="rc-select-selection-search-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-label="页码" readonly="" unselectable="on" style="opacity: 0;" value="" id="rc_select_TEST_OR_SSR"></span><span class="rc-select-selection-item" title="15 条/页">15 条/页</span></div></div></li></ul><ul class="rc-pagination"><li title="上一页" tabindex="0" class="rc-pagination-prev" aria-disabled="false"><button type="button" aria-label="prev page" class="rc-pagination-item-link"></button></li><li title="1" class="rc-pagination-item rc-pagination-item-1" tabindex="0"><a rel="nofollow">1</a></li><li title="2" class="rc-pagination-item rc-pagination-item-2" tabindex="0"><a rel="nofollow">2</a></li><li title="3" class="rc-pagination-item rc-pagination-item-3 rc-pagination-item-active" tabindex="0"><a rel="nofollow">3</a></li><li title="4" class="rc-pagination-item rc-pagination-item-4" tabindex="0"><a rel="nofollow">4</a></li><li title="下一页" tabindex="0" class="rc-pagination-next" aria-disabled="false"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li></ul></div>"`;
+
+exports[`Example styles 1`] = `"<ul class="rc-pagination" style="margin: 100px;"><li title="上一页" tabindex="0" class="rc-pagination-prev" aria-disabled="false"><button type="button" aria-label="prev page" class="rc-pagination-item-link"></button></li><li title="1" class="rc-pagination-item rc-pagination-item-1" tabindex="0"><a rel="nofollow">1</a></li><li title="2" class="rc-pagination-item rc-pagination-item-2 rc-pagination-item-active" tabindex="0"><a rel="nofollow">2</a></li><li title="3" class="rc-pagination-item rc-pagination-item-3" tabindex="0"><a rel="nofollow">3</a></li><li title="下一页" tabindex="0" class="rc-pagination-next" aria-disabled="false"><button type="button" aria-label="next page" class="rc-pagination-item-link"></button></li></ul>"`;
diff --git a/tests/__snapshots__/index.test.js.snap b/tests/__snapshots__/index.test.js.snap
new file mode 100644
index 00000000..d53ac7bf
--- /dev/null
+++ b/tests/__snapshots__/index.test.js.snap
@@ -0,0 +1,1723 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[` 1`] = `
+[
+  "prev disabled",
+  "item item-1 item-active",
+  "item item-2",
+  "item item-3",
+  "next",
+]
+`;
+
+exports[` 2`] = `
+[
+  "prev disabled",
+  "item item-1 item-active",
+  "item item-2",
+  "item item-3",
+  "item item-4",
+  "item item-5",
+  "next",
+]
+`;
+
+exports[` 3`] = `
+[
+  "prev disabled",
+  "item item-1 item-active",
+  "item item-2",
+  "item item-3",
+  "item item-4",
+  "item item-5",
+  "item item-6",
+  "next",
+  "options",
+]
+`;
+
+exports[` 4`] = `
+[
+  "prev disabled",
+  "item item-1 item-active",
+  "item item-2",
+  "item item-3",
+  "item item-4",
+  "item item-5",
+  "item item-6",
+  "item item-7",
+  "next",
+  "options",
+]
+`;
+
+exports[` 5`] = `
+[
+  "prev disabled",
+  "item item-1 item-active",
+  "item item-2",
+  "item item-3",
+  "item item-4",
+  "item item-5 item-before-jump-next",
+  "jump-next",
+  "item item-8",
+  "next",
+  "options",
+]
+`;
+
+exports[` 6`] = `
+[
+  "prev disabled",
+  "item item-1 item-active",
+  "item item-2",
+  "item item-3",
+  "item item-4",
+  "item item-5 item-before-jump-next",
+  "jump-next",
+  "item item-9",
+  "next",
+  "options",
+]
+`;
+
+exports[` 7`] = `
+[
+  "prev disabled",
+  "item item-1 item-active",
+  "item item-2",
+  "item item-3",
+  "item item-4",
+  "item item-5 item-before-jump-next",
+  "jump-next",
+  "item item-10",
+  "next",
+  "options",
+]
+`;
+
+exports[` 8`] = `
+[
+  "prev disabled",
+  "item item-1 item-active",
+  "item item-2",
+  "item item-3",
+  "item item-4",
+  "item item-5 item-before-jump-next",
+  "jump-next",
+  "item item-12",
+  "next",
+  "options",
+]
+`;
+
+exports[` 9`] = `
+[
+  "prev disabled",
+  "item item-1 item-active",
+  "item item-2",
+  "item item-3",
+  "item item-4",
+  "item item-5 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 25 pages should select page 2 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2 item-active",
+  "item item-3",
+  "next",
+]
+`;
+
+exports[`select in sequence should sequence select 25 pages should select page 3 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2",
+  "item item-3 item-active",
+  "next disabled",
+]
+`;
+
+exports[`select in sequence should sequence select 50 pages should select page 2 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2 item-active",
+  "item item-3",
+  "item item-4",
+  "item item-5",
+  "next",
+]
+`;
+
+exports[`select in sequence should sequence select 50 pages should select page 3 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2",
+  "item item-3 item-active",
+  "item item-4",
+  "item item-5",
+  "next",
+]
+`;
+
+exports[`select in sequence should sequence select 50 pages should select page 4 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2",
+  "item item-3",
+  "item item-4 item-active",
+  "item item-5",
+  "next",
+]
+`;
+
+exports[`select in sequence should sequence select 50 pages should select page 5 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2",
+  "item item-3",
+  "item item-4",
+  "item item-5 item-active",
+  "next disabled",
+]
+`;
+
+exports[`select in sequence should sequence select 60 pages should select page 2 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2 item-active",
+  "item item-3",
+  "item item-4",
+  "item item-5",
+  "item item-6",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 60 pages should select page 3 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2",
+  "item item-3 item-active",
+  "item item-4",
+  "item item-5",
+  "item item-6",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 60 pages should select page 4 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2",
+  "item item-3",
+  "item item-4 item-active",
+  "item item-5",
+  "item item-6",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 60 pages should select page 5 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2",
+  "item item-3",
+  "item item-4",
+  "item item-5 item-active",
+  "item item-6",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 60 pages should select page 6 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2",
+  "item item-3",
+  "item item-4",
+  "item item-5",
+  "item item-6 item-active",
+  "next disabled",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 70 pages should select page 2 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2 item-active",
+  "item item-3",
+  "item item-4",
+  "item item-5",
+  "item item-6",
+  "item item-7",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 70 pages should select page 3 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2",
+  "item item-3 item-active",
+  "item item-4",
+  "item item-5",
+  "item item-6",
+  "item item-7",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 70 pages should select page 4 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2",
+  "item item-3",
+  "item item-4 item-active",
+  "item item-5",
+  "item item-6",
+  "item item-7",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 70 pages should select page 5 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2",
+  "item item-3",
+  "item item-4",
+  "item item-5 item-active",
+  "item item-6",
+  "item item-7",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 70 pages should select page 6 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2",
+  "item item-3",
+  "item item-4",
+  "item item-5",
+  "item item-6 item-active",
+  "item item-7",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 70 pages should select page 7 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2",
+  "item item-3",
+  "item item-4",
+  "item item-5",
+  "item item-6",
+  "item item-7 item-active",
+  "next disabled",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 80 pages should select page 2 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2 item-active",
+  "item item-3",
+  "item item-4",
+  "item item-5 item-before-jump-next",
+  "jump-next",
+  "item item-8",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 80 pages should select page 3 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2",
+  "item item-3 item-active",
+  "item item-4",
+  "item item-5 item-before-jump-next",
+  "jump-next",
+  "item item-8",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 80 pages should select page 4 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2",
+  "item item-3",
+  "item item-4 item-active",
+  "item item-5",
+  "item item-6 item-before-jump-next",
+  "jump-next",
+  "item item-8",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 80 pages should select page 5 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-3 item-after-jump-prev",
+  "item item-4",
+  "item item-5 item-active",
+  "item item-6",
+  "item item-7",
+  "item item-8",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 80 pages should select page 6 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-4 item-after-jump-prev",
+  "item item-5",
+  "item item-6 item-active",
+  "item item-7",
+  "item item-8",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 80 pages should select page 7 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-4 item-after-jump-prev",
+  "item item-5",
+  "item item-6",
+  "item item-7 item-active",
+  "item item-8",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 80 pages should select page 8 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-4 item-after-jump-prev",
+  "item item-5",
+  "item item-6",
+  "item item-7",
+  "item item-8 item-active",
+  "next disabled",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 90 pages should select page 2 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2 item-active",
+  "item item-3",
+  "item item-4",
+  "item item-5 item-before-jump-next",
+  "jump-next",
+  "item item-9",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 90 pages should select page 3 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2",
+  "item item-3 item-active",
+  "item item-4",
+  "item item-5 item-before-jump-next",
+  "jump-next",
+  "item item-9",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 90 pages should select page 4 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2",
+  "item item-3",
+  "item item-4 item-active",
+  "item item-5",
+  "item item-6 item-before-jump-next",
+  "jump-next",
+  "item item-9",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 90 pages should select page 5 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-3 item-after-jump-prev",
+  "item item-4",
+  "item item-5 item-active",
+  "item item-6",
+  "item item-7 item-before-jump-next",
+  "jump-next",
+  "item item-9",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 90 pages should select page 6 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-4 item-after-jump-prev",
+  "item item-5",
+  "item item-6 item-active",
+  "item item-7",
+  "item item-8",
+  "item item-9",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 90 pages should select page 7 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-5 item-after-jump-prev",
+  "item item-6",
+  "item item-7 item-active",
+  "item item-8",
+  "item item-9",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 90 pages should select page 8 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-5 item-after-jump-prev",
+  "item item-6",
+  "item item-7",
+  "item item-8 item-active",
+  "item item-9",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 90 pages should select page 9 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-5 item-after-jump-prev",
+  "item item-6",
+  "item item-7",
+  "item item-8",
+  "item item-9 item-active",
+  "next disabled",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 100 pages should select page 2 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2 item-active",
+  "item item-3",
+  "item item-4",
+  "item item-5 item-before-jump-next",
+  "jump-next",
+  "item item-10",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 100 pages should select page 3 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2",
+  "item item-3 item-active",
+  "item item-4",
+  "item item-5 item-before-jump-next",
+  "jump-next",
+  "item item-10",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 100 pages should select page 4 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2",
+  "item item-3",
+  "item item-4 item-active",
+  "item item-5",
+  "item item-6 item-before-jump-next",
+  "jump-next",
+  "item item-10",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 100 pages should select page 5 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-3 item-after-jump-prev",
+  "item item-4",
+  "item item-5 item-active",
+  "item item-6",
+  "item item-7 item-before-jump-next",
+  "jump-next",
+  "item item-10",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 100 pages should select page 6 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-4 item-after-jump-prev",
+  "item item-5",
+  "item item-6 item-active",
+  "item item-7",
+  "item item-8 item-before-jump-next",
+  "jump-next",
+  "item item-10",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 100 pages should select page 7 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-5 item-after-jump-prev",
+  "item item-6",
+  "item item-7 item-active",
+  "item item-8",
+  "item item-9",
+  "item item-10",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 100 pages should select page 8 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-6 item-after-jump-prev",
+  "item item-7",
+  "item item-8 item-active",
+  "item item-9",
+  "item item-10",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 100 pages should select page 9 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-6 item-after-jump-prev",
+  "item item-7",
+  "item item-8",
+  "item item-9 item-active",
+  "item item-10",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 100 pages should select page 10 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-6 item-after-jump-prev",
+  "item item-7",
+  "item item-8",
+  "item item-9",
+  "item item-10 item-active",
+  "next disabled",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 120 pages should select page 2 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2 item-active",
+  "item item-3",
+  "item item-4",
+  "item item-5 item-before-jump-next",
+  "jump-next",
+  "item item-12",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 120 pages should select page 3 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2",
+  "item item-3 item-active",
+  "item item-4",
+  "item item-5 item-before-jump-next",
+  "jump-next",
+  "item item-12",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 120 pages should select page 4 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2",
+  "item item-3",
+  "item item-4 item-active",
+  "item item-5",
+  "item item-6 item-before-jump-next",
+  "jump-next",
+  "item item-12",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 120 pages should select page 5 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-3 item-after-jump-prev",
+  "item item-4",
+  "item item-5 item-active",
+  "item item-6",
+  "item item-7 item-before-jump-next",
+  "jump-next",
+  "item item-12",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 120 pages should select page 6 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-4 item-after-jump-prev",
+  "item item-5",
+  "item item-6 item-active",
+  "item item-7",
+  "item item-8 item-before-jump-next",
+  "jump-next",
+  "item item-12",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 120 pages should select page 7 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-5 item-after-jump-prev",
+  "item item-6",
+  "item item-7 item-active",
+  "item item-8",
+  "item item-9 item-before-jump-next",
+  "jump-next",
+  "item item-12",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 120 pages should select page 8 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-6 item-after-jump-prev",
+  "item item-7",
+  "item item-8 item-active",
+  "item item-9",
+  "item item-10 item-before-jump-next",
+  "jump-next",
+  "item item-12",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 120 pages should select page 9 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-7 item-after-jump-prev",
+  "item item-8",
+  "item item-9 item-active",
+  "item item-10",
+  "item item-11",
+  "item item-12",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 120 pages should select page 10 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-8 item-after-jump-prev",
+  "item item-9",
+  "item item-10 item-active",
+  "item item-11",
+  "item item-12",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 120 pages should select page 11 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-8 item-after-jump-prev",
+  "item item-9",
+  "item item-10",
+  "item item-11 item-active",
+  "item item-12",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 120 pages should select page 12 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-8 item-after-jump-prev",
+  "item item-9",
+  "item item-10",
+  "item item-11",
+  "item item-12 item-active",
+  "next disabled",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 2 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2 item-active",
+  "item item-3",
+  "item item-4",
+  "item item-5 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 3 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2",
+  "item item-3 item-active",
+  "item item-4",
+  "item item-5 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 4 1`] = `
+[
+  "prev",
+  "item item-1",
+  "item item-2",
+  "item item-3",
+  "item item-4 item-active",
+  "item item-5",
+  "item item-6 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 5 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-3 item-after-jump-prev",
+  "item item-4",
+  "item item-5 item-active",
+  "item item-6",
+  "item item-7 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 6 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-4 item-after-jump-prev",
+  "item item-5",
+  "item item-6 item-active",
+  "item item-7",
+  "item item-8 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 7 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-5 item-after-jump-prev",
+  "item item-6",
+  "item item-7 item-active",
+  "item item-8",
+  "item item-9 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 8 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-6 item-after-jump-prev",
+  "item item-7",
+  "item item-8 item-active",
+  "item item-9",
+  "item item-10 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 9 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-7 item-after-jump-prev",
+  "item item-8",
+  "item item-9 item-active",
+  "item item-10",
+  "item item-11 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 10 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-8 item-after-jump-prev",
+  "item item-9",
+  "item item-10 item-active",
+  "item item-11",
+  "item item-12 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 11 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-9 item-after-jump-prev",
+  "item item-10",
+  "item item-11 item-active",
+  "item item-12",
+  "item item-13 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 12 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-10 item-after-jump-prev",
+  "item item-11",
+  "item item-12 item-active",
+  "item item-13",
+  "item item-14 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 13 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-11 item-after-jump-prev",
+  "item item-12",
+  "item item-13 item-active",
+  "item item-14",
+  "item item-15 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 14 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-12 item-after-jump-prev",
+  "item item-13",
+  "item item-14 item-active",
+  "item item-15",
+  "item item-16 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 15 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-13 item-after-jump-prev",
+  "item item-14",
+  "item item-15 item-active",
+  "item item-16",
+  "item item-17 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 16 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-14 item-after-jump-prev",
+  "item item-15",
+  "item item-16 item-active",
+  "item item-17",
+  "item item-18 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 17 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-15 item-after-jump-prev",
+  "item item-16",
+  "item item-17 item-active",
+  "item item-18",
+  "item item-19 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 18 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-16 item-after-jump-prev",
+  "item item-17",
+  "item item-18 item-active",
+  "item item-19",
+  "item item-20 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 19 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-17 item-after-jump-prev",
+  "item item-18",
+  "item item-19 item-active",
+  "item item-20",
+  "item item-21 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 20 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-18 item-after-jump-prev",
+  "item item-19",
+  "item item-20 item-active",
+  "item item-21",
+  "item item-22 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 21 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-19 item-after-jump-prev",
+  "item item-20",
+  "item item-21 item-active",
+  "item item-22",
+  "item item-23 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 22 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-20 item-after-jump-prev",
+  "item item-21",
+  "item item-22 item-active",
+  "item item-23",
+  "item item-24 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 23 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-21 item-after-jump-prev",
+  "item item-22",
+  "item item-23 item-active",
+  "item item-24",
+  "item item-25 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 24 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-22 item-after-jump-prev",
+  "item item-23",
+  "item item-24 item-active",
+  "item item-25",
+  "item item-26 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 25 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-23 item-after-jump-prev",
+  "item item-24",
+  "item item-25 item-active",
+  "item item-26",
+  "item item-27 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 26 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-24 item-after-jump-prev",
+  "item item-25",
+  "item item-26 item-active",
+  "item item-27",
+  "item item-28 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 27 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-25 item-after-jump-prev",
+  "item item-26",
+  "item item-27 item-active",
+  "item item-28",
+  "item item-29 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 28 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-26 item-after-jump-prev",
+  "item item-27",
+  "item item-28 item-active",
+  "item item-29",
+  "item item-30 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 29 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-27 item-after-jump-prev",
+  "item item-28",
+  "item item-29 item-active",
+  "item item-30",
+  "item item-31 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 30 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-28 item-after-jump-prev",
+  "item item-29",
+  "item item-30 item-active",
+  "item item-31",
+  "item item-32 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 31 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-29 item-after-jump-prev",
+  "item item-30",
+  "item item-31 item-active",
+  "item item-32",
+  "item item-33 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 32 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-30 item-after-jump-prev",
+  "item item-31",
+  "item item-32 item-active",
+  "item item-33",
+  "item item-34 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 33 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-31 item-after-jump-prev",
+  "item item-32",
+  "item item-33 item-active",
+  "item item-34",
+  "item item-35 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 34 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-32 item-after-jump-prev",
+  "item item-33",
+  "item item-34 item-active",
+  "item item-35",
+  "item item-36 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 35 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-33 item-after-jump-prev",
+  "item item-34",
+  "item item-35 item-active",
+  "item item-36",
+  "item item-37 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 36 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-34 item-after-jump-prev",
+  "item item-35",
+  "item item-36 item-active",
+  "item item-37",
+  "item item-38 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 37 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-35 item-after-jump-prev",
+  "item item-36",
+  "item item-37 item-active",
+  "item item-38",
+  "item item-39 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 38 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-36 item-after-jump-prev",
+  "item item-37",
+  "item item-38 item-active",
+  "item item-39",
+  "item item-40 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 39 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-37 item-after-jump-prev",
+  "item item-38",
+  "item item-39 item-active",
+  "item item-40",
+  "item item-41 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 40 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-38 item-after-jump-prev",
+  "item item-39",
+  "item item-40 item-active",
+  "item item-41",
+  "item item-42 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 41 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-39 item-after-jump-prev",
+  "item item-40",
+  "item item-41 item-active",
+  "item item-42",
+  "item item-43 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 42 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-40 item-after-jump-prev",
+  "item item-41",
+  "item item-42 item-active",
+  "item item-43",
+  "item item-44 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 43 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-41 item-after-jump-prev",
+  "item item-42",
+  "item item-43 item-active",
+  "item item-44",
+  "item item-45 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 44 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-42 item-after-jump-prev",
+  "item item-43",
+  "item item-44 item-active",
+  "item item-45",
+  "item item-46 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 45 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-43 item-after-jump-prev",
+  "item item-44",
+  "item item-45 item-active",
+  "item item-46",
+  "item item-47 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 46 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-44 item-after-jump-prev",
+  "item item-45",
+  "item item-46 item-active",
+  "item item-47",
+  "item item-48 item-before-jump-next",
+  "jump-next",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 47 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-45 item-after-jump-prev",
+  "item item-46",
+  "item item-47 item-active",
+  "item item-48",
+  "item item-49",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 48 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-46 item-after-jump-prev",
+  "item item-47",
+  "item item-48 item-active",
+  "item item-49",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 49 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-46 item-after-jump-prev",
+  "item item-47",
+  "item item-48",
+  "item item-49 item-active",
+  "item item-50",
+  "next",
+  "options",
+]
+`;
+
+exports[`select in sequence should sequence select 500 pages should select page 50 1`] = `
+[
+  "prev",
+  "item item-1",
+  "jump-prev",
+  "item item-46 item-after-jump-prev",
+  "item item-47",
+  "item item-48",
+  "item item-49",
+  "item item-50 item-active",
+  "next disabled",
+  "options",
+]
+`;
diff --git a/tests/__snapshots__/options.test.js.snap b/tests/__snapshots__/options.test.js.snap
new file mode 100644
index 00000000..7e59d697
--- /dev/null
+++ b/tests/__snapshots__/options.test.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Options should render correctly 1`] = `"<li class="rc-pagination-options"><div class="rc-select rc-pagination-options-size-changer rc-select-single" aria-label="页码"><div class="rc-select-selector"><span class="rc-select-selection-search"><input type="search" autocomplete="off" class="rc-select-selection-search-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-label="页码" readonly="" unselectable="on" style="opacity: 0;" value="" id="rc_select_TEST_OR_SSR"></span><span class="rc-select-selection-item" title="10 条/页">10 条/页</span></div></div><div class="rc-pagination-options-quick-jumper">跳至<input type="text" aria-label="页" value="">页</div></li>"`;
diff --git a/tests/demo.test.js b/tests/demo.test.js
new file mode 100644
index 00000000..1637c4e6
--- /dev/null
+++ b/tests/demo.test.js
@@ -0,0 +1,20 @@
+import { mount } from 'enzyme';
+import fs from 'fs';
+import path from 'path';
+
+const exampleDir = path.resolve(__dirname, '../docs/examples');
+const files = fs
+  .readdirSync(exampleDir)
+  .filter((file) => file.endsWith('.tsx') && !file.startsWith('_'));
+
+describe('Example', () => {
+  files.forEach((file) => {
+    const name = path.basename(file, '.tsx');
+    it(name, () => {
+      const Example = require(path.join(exampleDir, file)).default;
+
+      const wrapper = mount(<Example />);
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+  });
+});
diff --git a/tests/index.test.js b/tests/index.test.js
index 73dba26a..fbd8f56e 100644
--- a/tests/index.test.js
+++ b/tests/index.test.js
@@ -1,6 +1,6 @@
-import React from 'react';
 import { mount } from 'enzyme';
 import Select from 'rc-select';
+import React from 'react';
 import Pagination from '../src';
 
 describe('Default Pagination', () => {
@@ -28,11 +28,12 @@ describe('Uncontrolled Pagination', () => {
   let wrapper;
   const onChange = jest.fn();
 
-  function shouldHighlightRight() {
+  function shouldHighlightRight(current) {
     const pagers = wrapper.find('li:not(.rc-pagination-total-text)');
     pagers.forEach((pager, index) => {
-      // page starts from 1
-      if (index === wrapper.state().current) {
+      // if (index === wrapper.state().current) { // Class Component
+      const props = wrapper.props();
+      if (index === (current ?? props.current ?? props.defaultCurrent)) {
         expect(pager.hasClass('rc-pagination-item-active')).toBe(true);
       } else {
         expect(pager.hasClass('rc-pagination-item-active')).toBe(false);
@@ -60,7 +61,10 @@ describe('Uncontrolled Pagination', () => {
   });
 
   it('default current page is 1', () => {
-    expect(wrapper.state().current).toBe(1);
+    // expect(wrapper.state().current).toBe(1); // Class Component
+    expect(wrapper.find('.rc-pagination-item-active').text()).toBe('1');
+    expect(wrapper.find('.rc-pagination-item').first().text()).toBe('1');
+    expect(wrapper.find('.rc-pagination-item').first().prop('title')).toBe('1');
   });
 
   it('prev-button should be disabled', () => {
@@ -69,10 +73,8 @@ describe('Uncontrolled Pagination', () => {
     expect(prevButton.getDOMNode().getAttribute('aria-disabled')).toBe('true');
   });
 
-  it(
-    'should hightlight current page and not highlight other page',
-    shouldHighlightRight,
-  );
+  it('should hightlight current page and not highlight other page', () =>
+    shouldHighlightRight());
 
   it('should calc page right', () => {
     const pagers = wrapper.find(
@@ -95,17 +97,19 @@ describe('Uncontrolled Pagination', () => {
     const page2 = pagers.at(1);
     expect(page2.hasClass('rc-pagination-item-2')).toBe(true);
     page2.simulate('click');
-    expect(wrapper.state().current).toBe(2);
+    // expect(wrapper.state().current).toBe(2); // Class Component
+    expect(wrapper.find('.rc-pagination-item-active').text()).toBe('2');
     expect(onChange).toHaveBeenLastCalledWith(2, 10);
-    shouldHighlightRight();
+    shouldHighlightRight(2);
   });
 
   it('should response next page', () => {
     const nextButton = wrapper.find('.rc-pagination-next');
     nextButton.simulate('click');
-    expect(wrapper.state().current).toBe(2);
+    // expect(wrapper.state().current).toBe(2); // Class Component
+    expect(wrapper.find('.rc-pagination-item-active').text()).toBe('2');
     expect(onChange).toHaveBeenLastCalledWith(2, 10);
-    shouldHighlightRight();
+    shouldHighlightRight(2);
   });
 
   it('should quick jump to expect page', () => {
@@ -116,7 +120,8 @@ describe('Uncontrolled Pagination', () => {
     );
     input.simulate('change', { target: { value: '2' } });
     goButton.simulate('click');
-    expect(wrapper.state().current).toBe(2);
+    // expect(wrapper.state().current).toBe(2); // Class Component
+    expect(wrapper.find('.rc-pagination-item-active').text()).toBe('2');
     expect(onChange).toHaveBeenLastCalledWith(2, 10);
   });
 
@@ -127,7 +132,8 @@ describe('Uncontrolled Pagination', () => {
     input.simulate('focus');
     input.simulate('change', { target: { value: '2' } });
     input.simulate('blur');
-    expect(wrapper.state().current).toBe(1);
+    // expect(wrapper.state().current).toBe(1);
+    expect(wrapper.find('.rc-pagination-item-active').text()).toBe('1');
     expect(onChange).not.toBeCalled();
   });
 
@@ -140,7 +146,8 @@ describe('Uncontrolled Pagination', () => {
     const input = quickJumper.find('input');
     input.simulate('change', { target: { value: '2' } });
     input.simulate('blur');
-    expect(component.state().current).toBe(2);
+    // expect(component.state().current).toBe(2);
+    expect(component.find('.rc-pagination-item-active').text()).toBe('2');
   });
 
   // https://github.com/ant-design/ant-design/issues/15539
@@ -161,6 +168,23 @@ describe('Uncontrolled Pagination', () => {
     nextButton.simulate('click');
     expect(totalText.text()).toBe('21 - 25 of 25 items');
   });
+
+  it('readonly warning should be displayed', () => {
+    const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    mount(<Pagination current={2} />);
+    expect(warnSpy).toHaveBeenCalledWith(
+      'Warning: You provided a `current` prop to a Pagination component without an `onChange` handler. This will render a read-only component.',
+    );
+    warnSpy.mockRestore();
+  });
+
+  it('should response keyboard event', () => {
+    const pagers = wrapper.find('.rc-pagination-item');
+    const page2 = pagers.at(2);
+    page2.simulate('keyDown', { key: 'Enter', keyCode: 13, which: 13 });
+    expect(wrapper.find('.rc-pagination-item-active').text()).toBe('3');
+    expect(onChange).toHaveBeenLastCalledWith(3, 10);
+  });
 });
 
 describe('Controlled Pagination', () => {
@@ -177,13 +201,22 @@ describe('Controlled Pagination', () => {
   });
 
   it('current should equal defaultCurrent', () => {
-    expect(wrapper.state().current).toBe(2);
+    // expect(wrapper.state().current).toBe(2); // Class Component
+    expect(wrapper.find('.rc-pagination-item-active').text()).toBe('2');
+    expect(wrapper.find('.rc-pagination-item').first().text()).toBe('1');
+    expect(
+      wrapper
+        .find('.rc-pagination-item')
+        .at(1)
+        .hasClass('rc-pagination-item-active'),
+    ).toBe(true);
   });
 
   it('should not response mouse click', () => {
     const nextButton = wrapper.find('.rc-pagination-next');
     nextButton.simulate('click');
-    expect(wrapper.state().current).toBe(2);
+    // expect(wrapper.state().current).toBe(2); // Class Component
+    expect(wrapper.find('.rc-pagination-item-active').text()).toBe('2');
     expect(onChange).toHaveBeenLastCalledWith(3, 10);
   });
 });
@@ -298,6 +331,7 @@ describe('Other props', () => {
 describe('current value on onShowSizeChange when total is 0', () => {
   let wrapper;
   const onShowSizeChange = jest.fn();
+  const onChange = jest.fn();
 
   beforeEach(() => {
     wrapper = mount(
@@ -305,6 +339,7 @@ describe('current value on onShowSizeChange when total is 0', () => {
         selectComponentClass={Select}
         showSizeChanger
         onShowSizeChange={onShowSizeChange}
+        onChange={onChange}
         current={1}
         total={0}
         showTotal={(total, range) =>
@@ -317,6 +352,7 @@ describe('current value on onShowSizeChange when total is 0', () => {
   afterEach(() => {
     wrapper.unmount();
     onShowSizeChange.mockReset();
+    onChange.mockReset();
   });
 
   it('should call onShowSizeChange when no change', () => {
@@ -328,6 +364,7 @@ describe('current value on onShowSizeChange when total is 0', () => {
     input.simulate('keyDown', { key: 'Down', keyCode: 40, which: 40 });
     input.simulate('keyDown', { key: 'Enter', keyCode: 13, which: 13 });
     expect(onShowSizeChange).not.toBeCalled();
+    expect(onChange).not.toBeCalled();
   });
 
   it('current should equal to the current in onShowSizeChange', () => {
@@ -340,9 +377,11 @@ describe('current value on onShowSizeChange when total is 0', () => {
     input.simulate('keyDown', { key: 'Down', keyCode: 40, which: 40 });
     input.simulate('keyDown', { key: 'Enter', keyCode: 13, which: 13 });
     expect(onShowSizeChange).toHaveBeenLastCalledWith(
-      wrapper.state().current,
+      // wrapper.state().current,
+      1,
       20,
     );
+    expect(onChange).toHaveBeenLastCalledWith(1, 20);
   });
 
   it('when total is 0, pager should show `1` and being disabled', () => {
@@ -439,3 +478,123 @@ describe('should emit onChange when total is string', () => {
     expect(onChange).toBeCalledWith(3, 10);
   });
 });
+
+describe('keyboard support', () => {
+  let wrapper;
+  const onChange = jest.fn();
+
+  beforeEach(() => {
+    wrapper = mount(
+      <Pagination defaultCurrent={50} total={1000} onChange={onChange} />,
+    );
+  });
+
+  afterEach(() => {
+    wrapper.unmount();
+    onChange.mockReset();
+  });
+
+  it('should work for prev page', () => {
+    const prevButton = wrapper.find('li.rc-pagination-prev');
+    expect(prevButton.exists()).toBeTruthy();
+
+    prevButton.simulate('click');
+    prevButton.simulate('click');
+
+    prevButton.simulate('keyDown', { key: 'Enter', keyCode: 13, which: 13 });
+    prevButton.simulate('keyDown', { key: 'Enter', keyCode: 13, which: 13 });
+
+    expect(onChange).toHaveBeenLastCalledWith(46, 10);
+  });
+
+  it('should work for next page', () => {
+    const nextButton = wrapper.find('li.rc-pagination-next');
+    expect(nextButton.exists()).toBeTruthy();
+
+    nextButton.simulate('keyDown', { key: 'Enter', keyCode: 13, which: 13 });
+    nextButton.simulate('keyDown', { key: 'Enter', keyCode: 13, which: 13 });
+
+    nextButton.simulate('click');
+    nextButton.simulate('click');
+
+    expect(onChange).toHaveBeenLastCalledWith(54, 10);
+  });
+
+  it('should work for jump prev page', () => {
+    const jumpPrevButton = wrapper.find('li.rc-pagination-jump-prev');
+    expect(jumpPrevButton.exists()).toBeTruthy();
+
+    jumpPrevButton.simulate('keyDown', {
+      key: 'Enter',
+      keyCode: 13,
+      which: 13,
+    });
+    jumpPrevButton.simulate('click');
+
+    expect(onChange).toHaveBeenLastCalledWith(40, 10);
+  });
+
+  it('should work for jump next page', () => {
+    const jumpNextButton = wrapper.find('li.rc-pagination-jump-next');
+    expect(jumpNextButton.exists()).toBeTruthy();
+
+    jumpNextButton.simulate('click');
+    jumpNextButton.simulate('keyDown', {
+      key: 'Enter',
+      keyCode: 13,
+      which: 13,
+    });
+
+    expect(onChange).toHaveBeenLastCalledWith(60, 10);
+  });
+});
+
+describe('select in sequence', () => {
+  const serializeCls = (items) =>
+    items.map((item) =>
+      String(item.prop('className')).replaceAll('rc-pagination-', ''),
+    );
+
+  class Demo extends React.Component {
+    state = { current: 1 };
+
+    changeHandle = (current) => this.setState({ current });
+
+    render() {
+      return (
+        <Pagination
+          {...this.props}
+          current={this.state.current}
+          onChange={this.changeHandle}
+        />
+      );
+    }
+  }
+
+  function sequenceSelector(total) {
+    describe(`should sequence select ${total} pages`, () => {
+      const wrapper = mount(<Demo total={total} />);
+      const cls = serializeCls(wrapper.find('li'));
+      expect(cls).toMatchSnapshot();
+
+      const pages = Math.floor((total - 1) / 10) + 1;
+      for (let i = 2; i <= pages; i++) {
+        it(`should select page ${i}`, () => {
+          wrapper.setState({ current: i });
+          const cls = serializeCls(wrapper.find('li'));
+          expect(cls).toMatchSnapshot();
+        });
+      }
+    });
+  }
+  // coped examples/basic.tsx
+  sequenceSelector(25);
+  sequenceSelector(50);
+  sequenceSelector(60);
+  sequenceSelector(70);
+  sequenceSelector(80);
+  sequenceSelector(90);
+  sequenceSelector(100);
+  sequenceSelector(120);
+  sequenceSelector(500);
+});
diff --git a/tests/jumper.test.js b/tests/jumper.test.js
index 7dbc1f03..f4370cc4 100644
--- a/tests/jumper.test.js
+++ b/tests/jumper.test.js
@@ -26,7 +26,8 @@ describe('Pagination with jumper', () => {
     const input = quickJumper.find('input');
     input.simulate('change', { target: { value: '-1' } });
     input.simulate('keyUp', { key: 'Enter', keyCode: 13, which: 13 });
-    expect(wrapper.state().current).toBe(1);
+    // expect(wrapper.state().current).toBe(1); // Class component
+    expect(wrapper.find('.rc-pagination-item-active').text()).toBe('1');
     expect(onChange).toHaveBeenLastCalledWith(1, 10);
   });
 
@@ -34,7 +35,8 @@ describe('Pagination with jumper', () => {
     const quickJumper = wrapper.find('.rc-pagination-options-quick-jumper');
     const input = quickJumper.find('input');
     input.simulate('blur');
-    expect(wrapper.state().current).toBe(10);
+    // expect(wrapper.state().current).toBe(10); // Class component
+    expect(wrapper.find('.rc-pagination-item-active').text()).toBe('10');
     expect(onChange).not.toBeCalled();
   });
 
@@ -65,6 +67,33 @@ describe('Pagination with jumper', () => {
     expect(input.instance().value).toBe('');
     expect(onChange).not.toBeCalled();
   });
+
+  it('should not jump when input empty string', () => {
+    const onChange = jest.fn();
+    const wrapper = mount(
+      <Pagination
+        onChange={onChange}
+        total={25}
+        showQuickJumper={{
+          goButton: (
+            <button type="button" className="go-button">
+              go
+            </button>
+          ),
+        }}
+      />,
+    );
+    const quickJumper = wrapper.find('.rc-pagination-options-quick-jumper');
+    const input = quickJumper.find('input');
+    const goButton = quickJumper.find('.go-button');
+    input.simulate('change', { target: { value: '3' } });
+    goButton.simulate('click');
+    expect(wrapper.find('.rc-pagination-item-active').text()).toBe('3');
+    input.simulate('change', { target: { value: '' } });
+    goButton.simulate('click');
+    expect(wrapper.find('.rc-pagination-item-active').text()).toBe('3');
+    expect(onChange).toHaveBeenLastCalledWith(3, 10);
+  });
 });
 
 describe('simple quick jumper', () => {
@@ -103,7 +132,11 @@ describe('simple quick jumper', () => {
     const goButton = quickJumper.find('.go-button');
     input.simulate('change', { target: { value: '2' } });
     goButton.simulate('click');
-    expect(wrapper.state().current).toBe(2);
+    // expect(wrapper.state().current).toBe(2); // Class component
+    expect(
+      wrapper.find('.rc-pagination-simple-pager').find('input').getDOMNode()
+        .value,
+    ).toBe('2');
     expect(onChange).toHaveBeenLastCalledWith(2, 10);
   });
 
@@ -134,7 +167,8 @@ describe('simple quick jumper', () => {
       const goButton = quickJumper.find('.go-button');
       input.simulate('change', { target: { value: '2' } });
       goButton.simulate('click');
-      expect(wrapper.state().current).toBe(2);
+      // expect(wrapper.state().current).toBe(2); // Class component
+      expect(wrapper.find('.rc-pagination-item-active').text()).toBe('2');
       expect(onChange).toHaveBeenLastCalledWith(2, 10);
     });
 
@@ -145,7 +179,8 @@ describe('simple quick jumper', () => {
       const input = wrapper.find('input');
       input.simulate('change', { target: { value: '&' } });
       input.simulate('keyUp', { key: 'Enter', keyCode: 13, which: 13 });
-      expect(wrapper.state().current).toBe(2);
+      // expect(wrapper.state().current).toBe(2); // Class component
+      expect(wrapper.find('.rc-pagination-item-active').text()).toBe('2');
       expect(onChange).toHaveBeenLastCalledWith(2, 10);
     });
   });
diff --git a/tests/options.test.js b/tests/options.test.js
new file mode 100644
index 00000000..f8d456de
--- /dev/null
+++ b/tests/options.test.js
@@ -0,0 +1,41 @@
+import { mount } from 'enzyme';
+import Select from 'rc-select';
+import zhCN from '../src/locale/zh_CN';
+import Options from '../src/Options';
+
+const WrapperOptions = (props) => {
+  return (
+    <Options
+      locale={zhCN}
+      rootPrefixCls="rc-pagination"
+      selectComponentClass={Select}
+      pageSize={10}
+      changeSize={jest.fn()}
+      quickGo={jest.fn()}
+      {...props}
+    />
+  );
+};
+
+describe('Options', () => {
+  it('should render correctly', () => {
+    const wrapper = mount(<WrapperOptions />);
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  describe('props:buildOptionText', () => {
+    it('should render correctly', () => {
+      const mockBuildOptionText = jest
+        .fn()
+        .mockImplementation((value) => (
+          <div className="custom-options">buildOptionText-{value}</div>
+        ));
+      const wrapper = mount(
+        <WrapperOptions buildOptionText={mockBuildOptionText} />,
+      );
+      const options = wrapper.find('.custom-options');
+      expect(options).toBeTruthy();
+      expect(options.text()).toBe('buildOptionText-10');
+    });
+  });
+});
diff --git a/tests/simple.test.js b/tests/simple.test.js
index 00fce9d8..f0aada33 100644
--- a/tests/simple.test.js
+++ b/tests/simple.test.js
@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
 import { mount } from 'enzyme';
 import Select from 'rc-select';
+import React, { useState } from 'react';
 import Pagination from '../src';
 
 describe('simple Pagination', () => {
@@ -60,7 +60,13 @@ describe('simple Pagination', () => {
   });
 
   it('default current page is 1', () => {
-    expect(wrapper.state().current).toBe(1);
+    // expect(wrapper.state().current).toBe(1); // Class Component
+    expect(wrapper.find('.rc-pagination-simple-pager').prop('title')).toBe(
+      '1/3',
+    );
+    expect(
+      wrapper.find('.rc-pagination-simple').find('input').getDOMNode().value,
+    ).toBe('1');
   });
 
   it('prev-button should be disabled', () => {
@@ -78,12 +84,18 @@ describe('simple Pagination', () => {
     const component = mount(
       <Pagination simple defaultCurrent={100} total={25} />,
     );
-    expect(component.state().current).toBe(3);
+    // expect(component.state().current).toBe(3); // Class Component
+    expect(component.find('.rc-pagination-simple-pager').prop('title')).toBe(
+      '3/3',
+    );
     const greaterCurrent = component.find('.rc-pagination-simple');
     const input = greaterCurrent.find('input');
     input.simulate('change', { target: { value: '313423434343343452121' } });
     expect(input.getDOMNode().value).toBe('3');
-    expect(component.state().current).toBe(3);
+    // expect(component.state().current).toBe(3); // Class Component
+    expect(component.find('.rc-pagination-simple-pager').prop('title')).toBe(
+      '3/3',
+    );
   });
 
   it('should merge custom pageSize to pageSizeOptions', () => {
@@ -120,4 +132,84 @@ describe('simple Pagination', () => {
     expect(onChange).toBeCalled();
     expect(onChange).toHaveBeenLastCalledWith(1, 10);
   });
+
+  it('should support keyboard event', () => {
+    const input = wrapper.find('.rc-pagination-simple').find('input');
+    input.simulate('change', { target: { value: '2' } });
+    input.simulate('keyDown', { key: 'Enter', keyCode: 13, which: 13 });
+    expect(input.getDOMNode().value).toBe('2');
+  });
+
+  it('should support keyboard event when press up or down key', () => {
+    const input = wrapper.find('.rc-pagination-simple').find('input');
+    input.simulate('keyUp', { key: 'ArrowDown', keyCode: 40, which: 40 });
+    input.simulate('keyUp', { key: 'ArrowDown', keyCode: 40, which: 40 });
+    expect(input.getDOMNode().value).toBe('3');
+
+    input.simulate('keyUp', { key: 'ArrowUp', keyCode: 38, which: 38 });
+    expect(input.getDOMNode().value).toBe('2');
+  });
+
+  it('should work form keyboard enter', () => {
+    const wrapper = mount(<Pagination total={100} defaultCurrent={5} simple />);
+    const input = wrapper.find('.rc-pagination-simple').find('input');
+
+    expect(input.exists()).toBeTruthy();
+
+    input.simulate('change', { target: { value: '8' } });
+    input.simulate('keyUp', { key: 'Enter', keyCode: 13, which: 13 });
+
+    expect(
+      wrapper.find('.rc-pagination-simple-pager').at(0).prop('title'),
+    ).toBe('8/10');
+  });
+
+  it(`prevent "up arrow" key reseting cursor position within textbox`, () => {
+    const mockPreventDefault = jest.fn();
+    const wrapper = mount(<Pagination total={100} defaultCurrent={5} simple />);
+    const input = wrapper.find('.rc-pagination-simple').find('input');
+
+    expect(input.exists()).toBeTruthy();
+
+    input.simulate('change', { target: { value: '8' } });
+    input.simulate('keyDown', {
+      key: 'ArrowUp',
+      keyCode: 38,
+      which: 38,
+      preventDefault: mockPreventDefault,
+    });
+
+    expect(mockPreventDefault).toHaveBeenCalled();
+    expect(input.getDOMNode().value).toBe('8');
+  });
+
+  it('should work when input is not number', () => {
+    const wrapper = mount(<Pagination total={100} defaultCurrent={5} simple />);
+    const input = wrapper.find('.rc-pagination-simple').find('input');
+
+    expect(input.exists()).toBeTruthy();
+
+    input.simulate('change', { target: { value: 'a' } }); // NaN case
+    input.simulate('blur');
+
+    expect(
+      wrapper.find('.rc-pagination-simple-pager').at(0).prop('title'),
+    ).toBe('5/10');
+  });
+
+  it('gotoButton should work', () => {
+    const wrapper = mount(
+      <Pagination simple total={25} showQuickJumper={{ goButton: true }} />,
+    );
+
+    const input = wrapper.find('.rc-pagination-options').find('input');
+    const gotoButton = wrapper.find('.rc-pagination-options').find('button');
+
+    input.simulate('change', { target: { value: '2' } });
+    gotoButton.simulate('click');
+
+    expect(
+      wrapper.find('.rc-pagination-simple-pager').at(0).prop('title'),
+    ).toBe('2/3');
+  });
 });
diff --git a/tests/two-pagination.test.js b/tests/two-pagination.test.js
index 75650b8d..74f08f78 100644
--- a/tests/two-pagination.test.js
+++ b/tests/two-pagination.test.js
@@ -1,5 +1,5 @@
-import React from 'react';
 import { mount } from 'enzyme';
+import React from 'react';
 import Pagination from '../src';
 import TwoPagination from './two-pagination';
 
@@ -17,15 +17,22 @@ describe('Two Pagination', () => {
   it('should has initial pageSize 20', () => {
     const p1 = wrapper.find(Pagination).at(0);
     const p2 = wrapper.find(Pagination).at(1);
-    expect(p1.state().pageSize).toBe(20);
-    expect(p2.state().pageSize).toBe(20);
+    // expect(p1.state().pageSize).toBe(20); // Class component
+    expect(p1.props().pageSize).toBe(20); // Function component
+    // expect(p2.state().pageSize).toBe(20); // Class component
+    expect(p2.props().pageSize).toBe(20); // Function component
   });
 
   it('should sync pageSize via state', () => {
     const p1 = wrapper.find(Pagination).at(0);
     const p2 = wrapper.find(Pagination).at(1);
     wrapper.find('.hook').simulate('click');
-    expect(p1.state().pageSize).toBe(50);
-    expect(p2.state().pageSize).toBe(50);
+    // wrapper.update();
+    const newP1 = wrapper.find(Pagination).at(0);
+    const newP2 = wrapper.find(Pagination).at(1);
+    // expect(p1.state().pageSize).toBe(50); // Class component
+    expect(newP1.props().pageSize).toBe(50); // Function component
+    // expect(p2.state().pageSize).toBe(50); // Class component
+    expect(newP2.props().pageSize).toBe(50); // Function component
   });
 });