Add a custom render function for page link text

[reediculous456]

#333

[ramzitm91]

Thanks for this amazing PR, I need it for my project right now..
Can you please add how to use this custom label render?
Thanks a lot!

[reediculous456]

@ramzitm91
Thanks for this amazing PR, I need it for my project right now..
Can you please add how to use this custom label render?
Thanks a lot!

Sure! I feel like the test I wrote gives the best example if you switch over to the code tab of this PR, but here's another explanation for you.

The paginate component now has a new property called pageLabelRender that excepts a function, returning the text you want displayed on the paginate buttons. It defaults to (index) => index + 1 so that if you don't include it you'll get the behavior that was expected before this was added.
To change the label render, you just need to reference the original data array in the render function.

const data = [
  { name: 'Item 1' },
  { name: 'Item 2' },
  { name: 'Item 3' },
  { name: 'Item 4' },
  { name: 'Item 5' },
];

  <PaginationBoxView
    pageCount={data.length}
    pageLabelRender={(index) => data[index]?.name}
  />

[AdeleD]

Hello,
Thank you for your PR!

Could we:

• Default the pageLabelRender prop to: (page) => page
• Keep {page} in the PageView component.
• And, in your example, do:

<PaginationBoxView
     pageCount={data.length}
     pageLabelRender={(page) => {
        const pageIndex = page - 1;
        return data[pageIndex]?.name;
    }}
/>

Please? :)

[reediculous456]

@AdeleD

I made the suggested changes except I left the {page} out of the PageView component because adding it there with the new page render function causes the page number to print twice by default and causes the page number to print with the custom render even if not desired

[AdeleD]

@AdeleD

I made the suggested changes except I left the {page} out of the PageView component because adding it there with the new page render function causes the page number to print twice by default and causes the page number to print with the custom render even if not desired

You're right, thanks.

Thank you very much for your work on this PR. I've just renamed the prop pageLabelRender to pageLabelBuilder to be consistent with the other existing props: hrefBuilder and ariaLabelBuilder.
It has been released in version 7.1.2.