A react pagination component
npm install @livelybone/react-pagination> pkg.module supported, which means that you can apply tree-shaking in you project
A react pagination component
1. Clone the library git clone https://github.com/livelybone/react-pagination.git
2. Go to the directory cd your-module-directory
3. Install npm dependencies npm i(use taobao registry: npm i --registry=http://registry.npm.taobao.org)
4. Open service npm run dev
5. See the example(usually is http://127.0.0.1/examples/test.html) in your browser
bash
npm i -S @livelybone/react-pagination
`Global name
ReactPaginationInterface
See in index.d.tsUsage
`typescript jsx
import React, { useRef } from 'react'
import ReactPagination from '@livelybone/react-pagination'
// HasPage mode
const Comp = () => (
pageSize={10}
initPageNumber={1}
pageCount={10}
currentPageSize={undefined}
maxPageBtn={7}
inputConfig={{
enable: true,
text: 'Go to',
}}
turnBtns={{
pre: { text: '<' },
next: { text: '>' },
}}
debounceTime={500}
onPageChange={console.log}
/>
)
// NoPage mode
const Comp1 = () => (
pageSize={10}
initPageNumber={1}
pageCount={undefined}
currentPageSize={10}
maxPageBtn={7}
inputConfig={{
enable: true,
text: 'Go to',
}}
turnBtns={{
pre: { text: '<' },
next: { text: '>' },
}}
debounceTime={500}
onPageChange={console.log}
/>
)
// This component will maintain the current page number automatically
// If you want to change the page number outside of it, please use
setPageNumber method:
let page = 1
const Comp2 = ({props}) => {
const paginationProps = {
pageSize: 10,
onPageChange: console.log
// ...
}
let paginationRef = useRef(null)
const setPageNumber = (page: number | string, triggerChange?: boolean) => {
paginationRef.current.setPageNumber(page, triggerChange)
}
return (
<>
{...paginationProps}
ref={r => paginationRef = r}
/>
onPageChange prop
>
)
}
`style
For building style, you can use the css or scss file in lib directory.
`js
// scss
import 'node_modules/@livelybone/react-pagination/lib/css/index.scss'// css
import 'node_modules/@livelybone/react-pagination/lib/css/index.css'
`
Or
`scss
// scss
@import 'node_modules/@livelybone/react-pagination/lib/css/index.scss'// css
@import 'node_modules/@livelybone/react-pagination/lib/css/index.css'
`Or, you can build your custom style by copying and editing
index.scssQA
1. Error
Error: spawn node-sass ENOENT> You may need install node-sass globally,
npm i -g node-sass`