wwwaiser / React Js Pagination
Licence: other
Stars: ✭ 308
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Js Pagination
fluent-windows
🌈 React components that inspired by Microsoft's Fluent Design System.
Stars: ✭ 122 (-60.39%)
Mutual labels: react-component, react-components
react-circle-flags
🚀 A React component with a collection of 300+ minimal circular SVG country flags. Wrapper of HatScripts/circle-flags
Stars: ✭ 29 (-90.58%)
Mutual labels: react-component, react-components
react-crud-icons
57 SVG icons for CRUD applications, packaged as a React component with light & dark themes and tooltip.
Stars: ✭ 19 (-93.83%)
Mutual labels: react-component, react-components
Registration-and-Login-using-MERN-stack
Simple Registration and Login component with MERN stack
Stars: ✭ 210 (-31.82%)
Mutual labels: react-component, react-components
reactjs-portfolio
Welcome to my portfolio react.js repository page.
Stars: ✭ 109 (-64.61%)
Mutual labels: react-component, react-components
git-issue-react-electronjs
⚙️. ⚛️. A desktop application created with Electronjs and Reactjs to be cross-platform to manage and track GitHub issues.
Stars: ✭ 21 (-93.18%)
Mutual labels: react-component, react-components
delete-react-zombies
CLI to search and delete unimported 🧟components in your react ⚛️ files
Stars: ✭ 70 (-77.27%)
Mutual labels: react-component, react-components
awesome-web-react
🚀 Awesome Web Based React 🚀 Develop online with React!
Stars: ✭ 31 (-89.94%)
Mutual labels: react-component, react-components
light-ui
A lightly React UI library
Stars: ✭ 38 (-87.66%)
Mutual labels: react-component, react-components
react-native-value-picker
Cross-Platform iOS(ish) style picker for react native.
Stars: ✭ 18 (-94.16%)
Mutual labels: react-component, react-components
best-of-react
🏆 A ranked list of awesome React open-source libraries and tools. Updated weekly.
Stars: ✭ 364 (+18.18%)
Mutual labels: react-component, react-components
Formsy React Components
Bootstrap components for a formsy-react form.
Stars: ✭ 290 (-5.84%)
Mutual labels: react-components, react-component
shared-react-components-example
An example of a mono-repository of shared React components libraries!
Stars: ✭ 85 (-72.4%)
Mutual labels: react-component, react-components
tiny-ui
⚛️ A friendly UI component set for React.js
Stars: ✭ 202 (-34.42%)
Mutual labels: react-component, react-components
React-Jupyter-Viewer
A react component to embed .ipyb notebooks in a blog or something
Stars: ✭ 50 (-83.77%)
Mutual labels: react-component, react-components
animation-wrapper-view
Declarative animations with imperative controls for RN/RNW.
Stars: ✭ 53 (-82.79%)
Mutual labels: react-component, react-components
React Image Gallery
React carousel image gallery component with thumbnail support 🖼
Stars: ✭ 2,946 (+856.49%)
Mutual labels: react-components, react-component
React Native demo
react-native实现网易新闻和美团,实现大部分页面。使用最新的react-navigation等组件,同时支持安卓和iOS设备。
Stars: ✭ 237 (-23.05%)
Mutual labels: react-components, react-component
react-example-paginated-list-infinite-scroll
Follow a React tutorial series with three parts to build a powerful component in React.
Stars: ✭ 43 (-86.04%)
Mutual labels: pagination, react-component
Flawwwless Ui
Flawwwless ui library for React.js.
Stars: ✭ 265 (-13.96%)
Mutual labels: react-components, react-component
react-js-pagination
A ReactJS dumb component to render a pagination.
The component comes with no built-in styles. HTML layout compatible with Bootstrap 3 pagination stylesheets.
If you would like it to work for Bootstrap 4, you will need to add 2 additional props when using this component:
itemClass="page-item"
linkClass="page-link"
Installation
Install react-js-pagination
with npm:
$ npm install react-js-pagination
Usage
Very easy to use. Just provide props with total amount of things that you want to display on the page.
import React, { Component } from "react";
import ReactDOM from "react-dom";
import Pagination from "react-js-pagination";
require("bootstrap/less/bootstrap.less");
class App extends Component {
constructor(props) {
super(props);
this.state = {
activePage: 15
};
}
handlePageChange(pageNumber) {
console.log(`active page is ${pageNumber}`);
this.setState({activePage: pageNumber});
}
render() {
return (
<div>
<Pagination
activePage={this.state.activePage}
itemsCountPerPage={10}
totalItemsCount={450}
pageRangeDisplayed={5}
onChange={this.handlePageChange.bind(this)}
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
Check Live example
Params
Name | Type | Default | Description |
---|---|---|---|
totalItemsCount |
Number | Required. Total count of items which you are going to display | |
onChange |
Function | Required. Page change handler. Receive pageNumber as arg | |
activePage |
Number | 1 |
Required. Active page |
itemsCountPerPage |
Number | 10 |
Count of items per page |
pageRangeDisplayed |
Number | 5 |
Range of pages in paginator, exclude navigation blocks (prev, next, first, last pages) |
prevPageText |
String / ReactElement | ⟨ |
Text of prev page navigation button |
firstPageText |
String / ReactElement | « |
Text of first page navigation button |
lastPageText |
String / ReactElement | » |
Text of last page navigation button |
nextPageText |
String / ReactElement | ⟩ |
Text of next page navigation button |
getPageUrl |
Function | Generate href attribute for page | |
innerClass |
String | pagination |
Class name of <ul> tag |
activeClass |
String | active |
Class name of active <li> tag |
activeLinkClass |
String | Class name of active <a> tag |
|
itemClass |
String | Default class of the <li> tag |
|
itemClassFirst |
String | Class of the first <li> tag |
|
itemClassPrev |
String | Class of the previous <li> tag |
|
itemClassNext |
String | Class of the next <li> tag |
|
itemClassLast |
String | Class of the last <li> tag |
|
disabledClass |
String | disabled |
Class name of the first, previous, next and last <li> tags when disabled |
hideDisabled |
Boolean | false |
Hide navigation buttons (prev, next, first, last) if they are disabled. |
hideNavigation |
Boolean | false |
Hide navigation buttons (prev page, next page) |
hideFirstLastPages |
Boolean | false |
Hide first/last navigation buttons |
linkClass |
String | Default class of the <a> tag |
|
linkClassFirst |
String | Class of the first <a> tag |
|
linkClassPrev |
String | Class of the previous <a> tag |
|
linkClassNext |
String | Class of the next <a> tag |
|
linkClassLast |
String | Class of the last <a> tag |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].