@aboutbits/react-pagination 中文文档教程

Question

React Pagination

这个包包括 React 的分页挂钩。 钩子支持在本地保存查询和分页值 状态或在浏览器 URL 中。

Table of content

• Usage
  • useQueryAndPagination
• Supported Implementations
  • In Memory Pagination
  • React-Router based pagination
  • NextJS Router based pagination
• Build & Publish
• Information

Usage

首先，您必须安装包：

npm install @aboutbits/react-pagination

其次，您可以使用 useQueryAndPagination 挂钩。 这个包实现了这个钩子的 3 个版本：

• In Memory: Use this hook where you don't want to modify browser history. e.g. Dialogs
• React Router: Use this hook if you want to keep track of the state in the URL and your project is using React Router.
• NextJS Router: Use this hook if you want to keep track of the state in the URL and your project is using NextJS.

useQueryAndPagination

这个钩子支持查询参数和分页的组合，并管理查询参数值的状态和 分页值。

The hook supports following configuration parameter object:

value	type	default	description
indexType	IndexType	IndexType.ZERO_BASED	It defines whether the pagination is zero or one based.
pageSize	number	15	Page size of the pagination.
defaultQueryParameters/Record	{}	It defines the default value for each query parameter. This is used to remove a query parameter from the URL and also to clear the query.

The hook returns the following object:

value	type	description
queryParameters	object	values of your query parameters
page	number	value of the current page
size	number	max elements in a single page
actions	object	object with 3 functions: updateQuery, setPage, clear

Example usage with NextJS

import { useQueryAndPagination } from '@aboutbits/react-pagination/dist/nextRouterPagination'

const users = [
    'Alex', 'Simon', 'Natan', 'Nadia', 'Moritz', 'Marie'
]

function UserList() {
    const { page, size, queryParameters, actions } = useQueryAndPagination({pageSize: 2})

    return (
        <div>
            <input onChange={(value) => actions.updateQuery({search: value})}/>
            <button onClick={() => actions.clear()}>Clear Input</button>
            <select onSelect={(value) => actions.setPage(value)}>
                <option value={0}>First Page</option>
                <option value={1}>Second Page</option>
            </select>

            <ul>
                {users.filter(user => user.startsWith(queryParameters.search))
                    .slice(page, page + size)
                    .map(user => <li>{user}</li>)}
            </ul>
        </div>
    )
}

Supported implementations

这个包包括上述钩子的 3 种不同实现。

• In Memory
• React Router
• NextJS Router

In Memory Pagination

如果您想跟踪内存中的分页，请使用此分页挂钩。 这对于对话框来说非常方便。

import { useQueryAndPagination } from '@aboutbits/react-pagination/dist/inMemoryPagination'

React-Router based pagination

这些是使用 React Router 进行路由的应用程序的特定挂钩。

import { useQueryAndPagination } from '@aboutbits/react-pagination/dist/reactRouterPagination'

NextJS Router based pagination

这些是使用 NextJS Router 的应用程序的特定挂钩 用于路由。

import { useQueryAndPagination } from '@aboutbits/react-pagination/dist/nextRouterPagination'

Build & Publish

要发布包，请提交所有更改并将它们推送到 main。 然后在本地运行以下命令之一：

npm version patch
npm version minor
npm version major

Information

About Bits 是一家位于意大利南蒂罗尔的公司。 您可以找到更多关于我们的信息 在我们的网站。

Support

如需支持，请联系 info@aboutbits.it。

Credits

• All Contributors

License

麻省理工学院许可证（麻省理工学院）。 请参阅许可文件了解更多信息。