importReact,{Component}from'react'importPaginationfrom'react-pitu';import'react-pitu/build/assets/styles/styles.css';classUserComponentextendsComponent{constructor(props){super(props);this.state={perPage: 10,totalItemCount: 0};this.handlePaginationChange=this.handlePaginationChange.bind(this);}componentDidUpdate(prevProps){if(prevProps.totalCount!==this.props.totalCount){this.setState({totalItemCount: <TOTAL_ITEM_COUNT>});}}handlePaginationChange(data){const{ cursor, itemsPerPage }=data;// make a next http request...}render(){const{ perPage, totalItemCount }=this.state;return(<PaginationperPage={perPage}total={totalItemCount}onPropertyChange={this.handlePaginationChange}/>);}}exportdefaultUserComponent;
Preview (1.1.x)
Preview (1.2.x)
Props
Name
Type
Default
Description
perPage
Number
5
Items per page needs to show
total
Number
Required Total items count
perPageOptions
Array
[5, 10, 15]
Per page options
navImages
Object
Optional
onPropertyChange
Function
Required. Pagination change handler.Will emit cursor and itemsPerPage
The Tidelift Subscription provides access to a continuously curated stream of human-researched and maintainer-verified data on open source packages and their licenses, releases, vulnerabilities, and development practices.