Localization or custom label for PaginationItem

PaginationItem should allow users to add custom text in pagination button so that they could customize or localize it.

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Pagination component gives you renderItem props which can be used to customize how pagination items are rendered. In order to use renderItem you can provide a PaginationItem with your own customization for instance you can make it as react-router-dom Link. However, I was not able to give PaginationItem a custom text for localization. There are two ways that I can achieve custom text for pagination which honestly is just too much work for just a localized number in pagination. The first one is to use usePagination and the other option is to implement a new PaginationItem with localized texts. I think it would be a good idea to have a prop on PaginationItem for custom text.

PaginationItem should have an optional prop for showing a custom text in pagination buttons. I have noticed that there is title prop which only add a tool-tip for accessibility. the implementation would be like this:

<ButtonBase
      ref={ref}
      component={component}
      disabled={disabled}
      focusVisibleClassName={classes.focusVisible}
      className={clsx(
        classes.root,
        classes.page,
        classes[variant],
        classes[shape],
        {
          [classes[`${variant}${capitalize(color)}`]]: color !== 'standard',
          [classes.disabled]: disabled,
          [classes.selected]: selected,
          [classes[`size${capitalize(size)}`]]: size !== 'medium',
        },
        className,
      )}
      {...other}
    >
      // check if label prop is available show it instead of page
      {type === 'page' && !label && page}
      {type === 'page' && !!label && label}
      {Icon ? <Icon className={classes.icon} /> : null}
    </ButtonBase>

Examples 🌈

<Pagination
  page={page}
  count={10}
  renderItem={(item) => (
    <PaginationItem
      component={Link}
      to={`/inbox${item.page === 1 ? "" : `?page=${item.page}`}`}
      // localized number or a custom text as label
      label={t("number", { number: item.page })}
      {...item}
    />
  )}
/>

Motivation 🔦

This helps to localize pagination without implementing extra component

[mnajdova]

Perfect, thanks @mohammadalijf

[mohammadalijf]

@mnajdova Sorry for inconvenience… documentation link for source code was pointing to a commit were it was outdated. On next branch where Pagination is moved to core, it has already been fixed. I searched Issues but I couldn’t find a related issue. In 91f2bb22dee473e9dbbb90a84a5d9bc898f7d760 page type is changed from number to React.ReactNode which will resolve the issue. Thank you