Big news!Introducing Socket AI - ChatGPT-Powered Threat Analysis. Learn more
Socket
Log inDemoInstall

krishan21-react-demo5

Package Overview
Dependencies
4
Maintainers
1
Versions
15
Issues
File Explorer

Advanced tools

krishan21-react-demo5

React Component for adding DygnifyCard support to Rails or any other MVC Framework

    1.0.14latest
    GitHub

Version published
Maintainers
1
Weekly downloads
16
increased by60%

Weekly downloads

Readme

Source

react-rails-pagination

  • Intro
  • Installation
  • Examples
  • Usage
  • Props

Intro

React Component for adding Pagination support to Rails or any other MVC Framework. This is a lightweight component that allows you to add pagination components .i.e the page number links and the navigation (Prev/Next) links.

This component was designed for a Rails project where REACT was being used as a frontend, but this should work equally well on other MVC Frameworks or websites that require or use a similar setup as well.

Installation

yarn add react-rails-pagination

or

npm install react-rails-pagination --save

Examples

Standard Component Style

pagination-std

Colored Component Styles

pagination-primary pagination-secondary

pagination-success pagination-danger

pagination-warning pagination-info

Outlined Component Styles

pagination-outline

pagination-outline-primary pagination-outline-secondary

pagination-outline-success pagination-outline-danger

pagination-outline-warning pagination-outline-info

Usage

import Pagination from 'react-rails-pagination'; ... function MyComponent = (props) => { const [page, setPage] = useState(0); const [totalPage, setTotalPages] = useState(0); // This is a default value for totalPages, update it before you render your component. For Rails you can use `Model.query.page(params[:page]).per(10).total_pages` to get this value. const fetchTableData = () => { // You can replace the below mentioned API Call with a fetch or axios or whatever else you use in your project Rails.ajax({ type: 'GET', url: `${/your-required-path-here}?page=${currentPage}`, // Replace with the URL you want to fetch data from success(response) { ... //Update Table Data on success }, }); }; handleChangePage(currentPage) { // Required as a prop to update data in your table. setPage(parseInt(currentPage)); // Update Current Page fetchTableData(); // Fetch Data for the new page }; ... return ( <> <h3>Upcoming Events</h3> <table> <thead> <tr> <th scope="col">#</th> <th scope="col">Name</th> <th scope="col">Code</th> <th scope="col">Starts</th> <th scope="col">Ends</th> </tr> </thead> <tbody>{invitationsList}</tbody> </table> <Pagination page={page} pages={totalPages} handleChangePage={handleChangePage} /> {/* Component render with required props */} </> ); };

Props

NameTypeDescription
pageNumberRequired. The current active page.
pagesNumberRequired. The Total number of pages available.
handleChangePageFunctionRequired. A function that handles what happens when current active page is changed. Refer to example for demo usage
outlineBooleanSwitches style of element to outlined
colorStringSwitches style of component according to color. Acceptable inputs are: primary, secondary, success, danger, warning, info
hideEndArrowsBooleanHide buttons that allow jumping to Last and First page
hideNavButtonsBooleanHide buttons that allow navigation to Next and Previous page

Keywords

FAQs

Last updated on 10 Feb 2023

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc