Bulma pagination as a react component.
Switch branches/tags
Nothing to show
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci add storybook fix bugs Oct 24, 2018
.storybook add storybook fix bugs Oct 24, 2018
stories add storybook fix bugs Oct 24, 2018
test add more tests Oct 24, 2018
.gitignore init Oct 23, 2018
README.md Update README.md Oct 25, 2018
index.js add storybook fix bugs Oct 24, 2018
package.json Automated release: v0.1.1 Oct 24, 2018
yarn.lock add storybook fix bugs Oct 24, 2018

README.md

bulma-pagination-react

code style: prettier CircleCI npm npm

Bulma pagination as a react component.

Make sure to include the bulma css in the head of your document!

Installation

yarn add bulma-pagination-react

Usage

To start using the pagination component all you need to do is provide how many pages there are and what page the user is on. All other properties are optional

import React from 'react';
import Pagination from 'bulma-pagination-react';

const POSTS_PER_PAGE = 10;

const Pager = ({ posts, currentPage, perPage = POSTS_PER_PAGE }) => {
  const pages = Math.ceil(posts.length / perPage);

  return (
    <Pagination
      pages={pages}
      currentPage={currentPage}
      onChange={page => console.log(`/blog?page=${page}`)}
    />
  );
};

export default Pager;

onChange

Function called when a button or page link is clicked. The only argument supplied to the function is the new page number.

visibleRadius

Modify how many page elements are visible in the pagination component. Defaults to 1.

className

bulma-pagination-react has classes that effect all elements in the component.

  • className: ClassName for the wrapper
  • prevClassName: ClassName for the previous button
  • nextClassName: ClassName for the next button
  • linkClassName: ClassName for each page link
  • listClassName: ClassName for the list of page links