Add the possibility to customize the scrollbar

[Yvonnick FRIN]

It would be nice to have the possibility to customize the scrollbar. Here is an example.

There is a codesandbox with a working example of code 👍

[Eduardo Augusto]

Hi, can I do this?

[Yvonnick FRIN]

Hi @eduaugustus 👋 thank you for considering contributing to this project! Sure feel free to open a pull request 👍

[Yvonnick FRIN]

Hi @eduaugustus, do you need help on this ?

[Eduardo Augusto]

Hi @frinyvonnick, I been thinkin about the solution, it's ok use react-custom-scrollbar?

[Yvonnick FRIN]

You mean this repository https://github.com/malte-wessel/react-custom-scrollbars ? Sure it is the one used in the codesandox I linked as example 😉

[Eduardo Augusto]

ah okay, I'll use this :D

[Eduardo Augusto]

@frinyvonnick I've been thinking about solution in this weekend. The dev go set a prop in scroolbar like customScroolbar and with this react render a custom default scroolbar or dev should pass custom custom config?

[Yvonnick FRIN]

You mean something like this:

<InfiniteLoading
  hasMoreItems={hasMore}
  itemHeight={40}
  loadMoreItems={fetchMore}
+ scrollbar
>
  {items.map(item => <div key={item}>{item}</div>)}
</InfiniteLoading>

If scrollbar prop is set we use react-custom-scrollbars otherwise we keep native scrollbar. We can also add a scrollbarProps prop to pass down options to react-custom-scrollbars.

<InfiniteLoading
  hasMoreItems={hasMore}
  itemHeight={40}
  loadMoreItems={fetchMore}
+ scrollbar
+ scrollbarProps={{ universal: true }}
>
  {items.map(item => <div key={item}>{item}</div>)}
</InfiniteLoading>

Does it seems correct?

[Eduardo Augusto]

@frinyvonnick Hmm this style I think the scroll gonna have many props, I realy been think other way, if you pass customScrollbar prop, scrollbar has a condition render, if is true, render a default custom scrollbar, if false, render normal browser scroll

[Eduardo Augusto]

@frinyvonnick LOL I'm sorry, I not understand before, but now it's clear, what you say is right hahaha

[Yvonnick FRIN]

👋 @eduaugustus If you want some help you could create a pull request with your implementation so we could discuss about it together?