How to use a customized auto hide `scroll to bottom` button?

[mahdidavoodi7]

this little button always shows up when I scroll to the top a bit.

but I don't know how to remove this component or use a customized one.

any help would be appreciated.

[himanshuNegi755]

I used followButtonClassName props in ScrollToBottom , and then added background-image with background-size: 'contain' properties. worked for me.

[koen-chen]

@mahdidavoodi7 I found some solutions. you can set followButtonClassName="someHiddenClass" to hidden build-in button, and manully add AutoHideFollowButton in your page. some code like:

import ScrollToBottom, { AutoHideFollowButton } from 'react-scroll-to-bottom';

<ScrollToBottom followButtonClassName="someHiddenClass"  >
  <LongList ></LongList>
  <AutoHideFollowButton className="someCustomClass" >
     <Button>Some Custom Button or Icon</Button>
  </AutoHideFollowButton>
</ScrollToBottom>

you also need overwrite styles for AutoHideFollowButton , some styles like:

.someCustomClass {
  background-color: transparent !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;

  &:hover {
    background-color: transparent  !important;
  }
}