dizco / react-scrollable-feed Goto Github PK

Describe the bug
The component is contantly logging componentDidUpdate and other events. I noticed someone added a debug flag to disable this in the repository a month ago however the latest version is 2 months old as does not include this. Please advise.

To Reproduce
Steps to reproduce the behavior:
Install and go to log on render of component.

Expected behavior
Not to log all the time or have a debug field.

Describe the bug
When there are more than just a few entries within the ScrollableFeed, Microsoft Edge will blank.

To Reproduce
Steps to reproduce the behavior:

1. Go to the Live Demo screen on Microsoft Edge (https://dizco.github.io/react-scrollable-feed/)
2. Click Add Item until screen blanks (for me it happens consistently at 7)

Expected behavior
Screen to not blank and the items in the ScrollableFeed to be displayed properly

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows 10
• Browser Edge
• Version Microsoft Edge 44.18362.449.0

This is the error displayed within the console:

[object Error]: {description: "Object doesn't support property or method 'scrollBy'", message: "Object doesn't support property or method 'scrollBy'", number: -2146827850, stack: "TypeError: Object doesn't support property or method 'scrollBy' at t.defaultProps.animateScroll (https://dizco.github.io/react-scrollable-feed/static/js/main.d2e505ac.chunk.js:1:2559) at t.prototype.scrollParentToChild (https://dizco.github.io/react-scrollable-feed/static/js/main.d2e505ac.chunk.js:1:2098) at t.prototype.componentDidUpdate (https://dizco.github.io/react-scrollable-feed/static/js/main.d2e505ac.chunk.js:1:1514) at Mi (https://dizco.github.io/react-scrollable-feed/static/js/1.e63eb374.chunk.js:1:99275) at Ri (https://dizco.github.io/react-scrollable-feed/static/js/1.e63eb374.chunk.js:1:94905) at Oi (https://dizco.github.io/react-scrollable-feed/static/js/1.e63eb374.chunk.js:1:94277) at ji (https://dizco.github.io/react-scrollable-feed/static/js/1.e63eb374.chunk.js:1:100475) at Sn (https://dizco.github.io/react-scrollable-feed/static/js/1.e63eb374.chunk.js:1:39902)"}

Describe the bug
If the scrollable div doesn't initially have enough content to show a scrollbar, but new items are added later to require a scrollbar, users aren't automatically scrolled to the bottom.

To Reproduce
Steps to reproduce the behavior:

1. Go to the demo page (https://dizco.github.io/react-scrollable-feed/).
2. In developer tools, change .scrollable-wrapper to have a fixed height of 300px instead of a max-height of 300px. Verify that no scrollbars appear.
3. Add new items until a scrollbar appears.

Expected behavior
Once a scrollbar appears, users should be scrolled to the bottom. Once at the bottom, users should be able to scroll back up with their scroll position not changing when new items are added.

Desktop (please complete the following information):

• OS: macOS 10.15.7
• Browser: Chrome

Additional context
forceScroll could be set to true, however that would also force scrolling to the bottom if a user scrolls up later.

Hello!
Nice project, but I've read documentation and really wondered is it possible to make infinite scroll with with component? In usual onScroll event I can use e.target.scrollTop === 0 to determine if scroll at top, to fetch new items from server. But in this component I've got only isAtBottom parameter. If make infinite scroll possible, at least it should be in examples.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Describe the bug
Scrolling down, then expanding the browsers height produces white space within scrollable area.

This seems to be only an issue on safari. I would like to try to solve this myself but i'm not exactly sure what is causing this.
Another thing I've noticed is every now and again (seemingly randomly), the scrollable area jumps up adding white space in the same way. I'm not sure if these two problems are related but if this first is fixed, it may solve the second.

To Reproduce
Steps to reproduce the behavior:

1. Open Demo on Safari 11.2.3
2. Inspect CSS
3. Add height:100vh to
4. Add enough items to overfill the screen (25)
5. Change the height of the window to reveal only 5 items.
6. Scroll to bottom of message window.
7. Expand height to reveal white space

Expected behavior
Message to stick to bottom of window revealing new items

Desktop (please complete the following information):

• OS: Mac
• Browser [safari]
• Version [11.2.3]

I am trying to use the scollable feed component using a single component as a child:
https://github.com/stephane-monnot/react-vertical-timeline

It is working perfectly as long as I set the forceScroll property, but removing it the feed only scrolls one or two times before stopping it. After manually scrolling to the bottom it resumes auto-scrolling but stops again shortly afterwards. It looks like isViewable starts returning false for some reason.

To Reproduce
Steps to reproduce the behavior:
I added the component to your default example:
https://github.com/Snaptags/react-scrollable-feed/tree/VerticalTimeline/example
Just do npm install;npm start to reproduce the issue.

Expected behavior
The content should auto-scroll while at the end of the list.

Desktop:

• Windows 10
• Chrome 71.0.3578.98

Any ideas?

This feature can be helpful for pagination where when the user scrolls to the top, we can fire a callback that lets us load previous data.

Is your feature request related to a problem? Please describe.
I got problem with the library is lack of current position in div
While i need the div constant at the bottom, i need to know when it's scrolling down away from top to animation the header of div

Describe the solution you'd like
Add default event onScroll in onScroll of library to use scrollTop, offsetTop and etc

Describe alternatives you've considered

Describe the bug
The forceScroll property is not assignable to type "IntrinsicAttributes"

Screenshots

Desktop:

• OS: Windows 10
• VSCode
• TSX (Typescript React)

I copied the example in the readme almost exactly and I don't get a scrollable feed. Are there any dependencies that I need?

source code:

import logo from './logo.svg';
import './App.css';
import Button from '@mui/material/Button';
import { useState } from 'react';

import ScrollableFeed from 'react-scrollable-feed'

function App() {
    const items = ['Item 1', 'Item 2', 'Item 2', 'Item 2', 'Item 2', 'Item 2'];
    return (
        <ScrollableFeed>
          {items.map((item, i) => <div key={i}>{item}</div>)}
        </ScrollableFeed>
      );
}

When I inspect in the browser I get this rendered HTML

<div style="max-height: inherit; height: inherit; overflow-y: auto;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 2</div>
  <div>Item 2</div>
  <div>Item 2</div>
  <div>Item 2</div>
  <div>
  </div>
</div>

Am I missing something?

Describe the bug
Could you add React 17 as a valid dependency, or perhaps more generally, allow react>=15?

To Reproduce
Steps to reproduce the behavior:

1. Use npm 6 (e.g. 6.14.11)
2. npm install react@17 react-scrollable-feed
3. See error:
   npm WARN [email protected] requires a peer of react@^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.

I imagine npm 7 produces a (different) warning.

Like a method to scroll to the bottom, it would be great to be able to scroll to the top in the same way. A public method scrollToTop.

Describe the bug
When a user posts an image in chat, the component will not re-render it's position after the image loads. So the user will need to manually scroll down to the bottom of the image to resume chatting.

To Reproduce
Steps to reproduce the behavior:

1. Try React-Scrollable-Feed in any chatroom implementation that supports image posting
2. Scroll to the bottom
3. Add an image to chat
4. See how the user is no longer scrolled to the bottom of chat and chat is now paused

Expected behavior
I would expect the chat to move to the bottom of the image, if the image was previously the bottom of the page.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):
all

• but tested on windows 10, chrome

Smartphone (please complete the following information):
iOS

Additional context
Add any other context about the problem here.

Are there any plans to support React 18?

Tnx for your usefull work! But what about pagination, when old messages is arriving by portions after scroll to top?

Is your feature request related to a problem? Please describe.
I want to execute a specific behavior when the onScroll event of this component fires - specifically, I'd like to show a "scroll to bottom" button when the user scrolls up, and the last element goes out of view.
Currently, it seems like there is no way to do this.

Describe the solution you'd like
The onScroll prop could be added to the ScrollableFeed component and passed down to the main div that wraps the children. It's an easy solution that would allow us to attach a handler to this event.