Pagination

Properties

Properties	Description
`mode`	(optional) if set to `infinity`, then the pagination bar will be now shown and but infinity scrolling will do the content presentation. For more information, check out the Infinity Scroller. Defaults to `pagination`.
`children`	(optional) the given content can be either a function or a React node, depending on your needs. A function contains several helper functions. More details down below and have a look at the examples in the demos section.
`align`	(optional) define the alignment of the pagination button bar. Can be `center`, `left` or `right`. Defaults to `left`.
`startup_page`	(optional) the page shown in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well.
`current_page`	(optional) the page shown at the moment the component renders. Defaults to `1`.
`page_count`	(optional) the total pages count. Defaults to `1`.
`startup_count`	(optional) defines how many `infinity` pages should be loaded / shown on the first render. Defaults to `1`.
`parallel_load_count`	(optional) defines how many `infinity` pages should be loaded / shown once the user scrolls down. Defaults to `1`.
`min_wait_time`	(optional) the minimum time to wait, if the infinity scroll was invoked under that time threshold. This prevents not intentional infinity scroll loop calls. Defaults to `400` milliseconds.
`place_maker_before_content`	(optional) if set to `true`, the infinity marker will be placed before the content (on top off). This could potentially have negative side effects. But it depends really on the content if this would make more sense to use instead. Defaults to `false`.
`use_load_button`	(optional) if set to `true` it will disable the automated infinity scrolling, but shows a load more button at the of the content instead.
`hide_progress_indicator`	(optional) if set to `true` no indicator will be shown.
`page_element`	(optional) by default a `<div>` is used. Set it to any element you have to use. Adds also a class: `dnb-pagination__page` shown.
`fallback_element`	(optional) (infinity mode) is used by the indicator, load more bar as well as by the marker. Defaults to a `div`.
`indicator_element`	(optional) (infinity mode) is used by the indicator. Falls back to `fallback_element` if not defined.
`marker_element`	(optional) (infinity mode) is used by the internal marker. Falls back to `fallback_element` if not defined.
`set_content_handler`	(optional) callback function to get the `setContent` handler from the current pagination instance. e.g. `set_content_handler={fn => (...)}`. Use this handler to insert content during infinity mode.
`reset_content_handler`	(optional) callback function to get the `resetContent` handler from the current pagination instance. e.g. `reset_content_handler={fn => (...)}`. Use this handler to reset all the content. You can set it to `true`, to programmatically reset the content.
`reset_pagination_handler`	(optional) callback function to get the `resetInfinity` handler from the current pagination instance. e.g. `reset_pagination_handler={fn => (...)}`. Use this handler to reset all the internal states. You can set it to `true`, to programmatically reset the states.
`end_infinity_handler`	(optional) callback function to get the `endInfinity` handler from the current pagination instance. e.g. `end_infinity_handler={fn => (...)}`. Use this handler to end the infinity scrolling procedure, in case the `page_count` is unknown.
`button_title`	(optional) The title used in every button shown in the bar. Defaults to `Side %s`.
`next_title`	(optional) The title used in the next page button. Defaults to `Neste side`.
`prev_title`	(optional) The title used in the previous page button. Defaults to `Forrige side`.
`more_pages`	(optional) The title used in the dots. Relevant for screen-readers. Defaults to `%s flere sider`.
`is_loading_text`	(optional) Shown until new content is inserted in to the page. Defaults to `Laster nytt innhold`.
`load_button_text`	(optional) Used during infinity mode. If `use_load_button` is set to `true`, then a button is show on the bottom. If the `startup_page` is higher than 1. Defaults to `Vis mer innhold`.
`loadButton`	(optional) Used to set load button text and icon aligment. Accepts a function returning a ReactNode too, so you can replace the button with your own component.
`disabled`	(optional) if set to `true`, all pagination bar buttons are disabled.
`skeleton`	(optional) if set to `true`, an overlaying skeleton with animation will be shown.
Space	(optional) spacing properties like `top` or `bottom` are supported.

Translations

More info about translations can be found in the general localization and Eufemia Forms localization docs.

Key	nb-NO	en-GB
`Pagination.button_title`	Side %s	Page %s
`Pagination.next_title`	Neste side	Next page
`Pagination.prev_title`	Forrige side	Previous page
`Pagination.more_pages`	%s flere sider	%s more pages
`Pagination.is_loading_text`	Laster nytt innhold	Loading new content
`Pagination.load_button_text`	Vis mer innhold	Show more content

Content as a render prop

The content can be either a function or a React Node. A function may be more useful if infinity mode is used.

<Pagination
  ...
>
  {({ pageNumber, setContent, resetContent, ...otherInternalMethods }) => <code>Page {pageNumber}</code>}
</Pagination>

#Pagination

#Properties

#Translations

#Content as a render prop

Pagination

Properties

Translations

Content as a render prop