CODEWITHSUNDEEP
javascriptreactjspagination
user42010
user42010

Reputation: 327

react-ultimate-pagination component setup

I'm trying to use this package react-ultimate-pagination: https://github.com/ultimate-pagination/react-ultimate-pagination

I want to set it up like their basic demo example: https://codepen.io/dmytroyarmak/pen/GZwKZJ

The usage instructions at the bottom of the github page say to import the component like this: 

import ReactUltimatePagination from 'react-ultimate-pagination';

But the codepen demo just shows a constant: 

const UltimatePagination = reactUltimatePaginationBasic.default;

I copied the code from the demo, but since it is mismatched with the import, I have an error of UltimatePagination being undefined and reactUltimatePaginationBasic undefined.

Does anyone know how to set up this component like the demo example?

Upvotes: 1

Views: 1814

Answers (2)

trixn
trixn

Reputation: 16354

The module exports the higher oder component createUltimatePagination as a named export. To import it using es6 import syntax it has to be the following:

import {createUltimatePagination} from 'react-ultimate-pagination';

Example App:

import React, { Component } from "react";
import { render } from "react-dom";

import { createUltimatePagination } from "react-ultimate-pagination";

const Button = ({ value, isActive, disabled, onClick }) => (
  <button
    style={isActive ? { fontWeight: "bold" } : null}
    onClick={onClick}
    disabled={disabled}
  >
    {value}
  </button>
);

const PaginatedPage = createUltimatePagination({
  itemTypeToComponent: {
    PAGE: Button,
    ELLIPSIS: () => <Button value="..." />,
    FIRST_PAGE_LINK: () => <Button value="First" />,
    PREVIOUS_PAGE_LINK: () => <Button value="Prev" />,
    NEXT_PAGE_LINK: () => <Button value="Next" />,
    LAST_PAGE_LINK: () => <Button value="Last" />
  }
});

class App extends Component {
  state = {
    page: 1
  };

  render() {
    return (
      <PaginatedPage
        totalPages={10}
        currentPage={this.state.page}
        onChange={page => this.setState({ page })}
      />
    );
  }
}

render(<App />, document.getElementById("root"));

Also see this working example on codesandbox.

To be honest I played around with the api of that library and actually it is unclear to me how this library is intended to be used. A pagination component should receive a list of items and then provide a render prop to render the current page with a slice of these items. It's a pagination that does not paginate. Basically it's only a button bar.

Upvotes: 5

Paul McLoughlin
Paul McLoughlin

Reputation: 2289

Just use var ReactUltimatePagination = require('react-ultimate-pagination'); after you've installed it with npm install react-ultimate-pagination --save

Upvotes: 1

Related Questions