radivarig / react-infinite-any-height Goto Github PK

View Code? Open in Web Editor NEW

41.0 7.0 14.0 34 KB

ReactJS component for displaying infinite list of elements with arbitrary height.

License: MIT License

JavaScript 97.56% HTML 2.44%

react-infinite-any-height's Introduction

react-infinite-any-height

react-infinite with automatic height calculation.

Try it - Live Example

Install

npm install react-infinite-any-height (peer dependencies: react)

Demo

Check out Live Example, or run locally

git clone [email protected]:Radivarig/react-infinite-any-height.git
npm install
npm run dev

navigate to localhost:8080

Usage

// ...
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import InfiniteAnyHeight from 'react-infinite-any-height';

class App extends Component {
  constructor() {
    super();

    const list = new Array(10000).fill('').map((x, i) => {
      const height = 100 + Math.round(Math.abs((Math.sin(i) * 250)));
      const style = { height, border: 'solid 1px', backgroundColor: `#${height}` };
      return (
        <div key={i} style={style}>
          Height: { height + 2 }
          <div style={{ textAlign: 'center', color: 'white' }}>
            Item: {i}
          </div>
        </div>
      );
    });

    this.state = { list };
  }

  render() {
    return (
      <InfiniteAnyHeight
        list={this.state.list}
        preloadAdditionalHeight={window.innerHeight*2}
        useWindowAsScrollContainer
      />
    );
  }
}

var elemDiv = document.createElement('div')
document.body.appendChild(elemDiv)
ReactDOM.render(<App/>, elemDiv)

All props are passed to react-infinite as well. When updating list make sure to use .slice(0) to change reference. If useWindowAsScrollContainer is ommited, both containerHeight and scrollContainer (the node that has the active .scrollTop) props are required.

License

MIT

react-infinite-any-height's People

Contributors

Stargazers

Watchers

Forkers

jondwillis jonykrause martjanz allsquare timgur shift-keshav-pudaruth j1ands jcgertig primigenus mashehu ellwarco goodwall cliffcapital

react-infinite-any-height's Issues

Very noticeable jumping

Ive noticed the list jumping many items at the one time. Its most noticeable when displayBottomUpwards is enabled and you scroll up before attempting to scroll down again. In such instance the list keeps bouncing back to the ~2nd last item, obscuring the last item.

Ive also noticed it if you slowly scroll up, it ends up skipping items.
The same issue doesn't occur in react-list (Theres some minor jumping/flickering, but not entire items). It would seem to me the calculation of heights is off. All items are of uniform height (They wont be in production but for my initial tests they are).

Its an electron application that is still in the middle of development so Im unable to provide a link, but hopefully the GIF will show it better.

render() {
		return (
			<ul id="messagelist" className="listedmessages" ref="scroller">
				<InfiniteAnyHeight containerHeight={ 570 } list={ this.props.messages.map(this._renderBubbles) } displayBottomUpwards scrollContainer={ this.refs.scroller } />
			</ul>
		);
	}

Handle or document margin

Since getBoundingClientRect is used to calculate the height of an element, this doesn't include margin. However, if each element rendered has a margin set, this will lead to miscalculations and in my case even a max call stack size exceeded crash.

Fixing it seems incisive and possibly performance-impacting so as a temporary solution perhaps it might be a good idea to add a note to the documentation warning of this side-effect and recommending steps to avoid it happening.

WebPack Export Issue

Any ideas why this is happening?

Error in .//react-infinite-any-height/src/InfiniteAnyHeight.jsx
Module build failed: ReferenceError: Unknown plugin "react-transform" specified in "/Users/brandonmikeska/workbench/sfm/.babelrc.env.development" at 2, attempted to resolve relative to "/Users/brandonmikeska/workbench/sfm"
at Array.map (native)
@ .//react-infinite-any-height/exports.js 1:17-94

We are using the create-react-app if that helps narrow down the issue?

PropTypes Issue

Can you change from 'React.PropTypes' to 'PropTypes'?

// src/index.js
export default class InfiniteAnyHeight extends Component {
  static displayName = 'InfiniteAnyHeight';

  static propTypes = {
    heights: PropTypes.array,
    heightsUpdateCallback: PropTypes.func,
    list: PropTypes.node,
    scrollContainer: PropTypes.object,
    useWindowAsScrollContainer: PropTypes.bool
  };

Scroll position when list refreshed with displayBottomUpward set to true

<InfiniteAnyHeight list={res} className="messages-container__list" containerHeight={window.innerHeight - 155 - 69} handleScroll={ (node) => handleScroll(node) } scrollContainer displayBottomUpwards preloadAdditionalHeight={window.innerHeight - 155 - 69}/>

When I'm adding a new elem to the list the scroll doesn't stay at the bottom, is it normal or I missed something ?

Thanks

regarding scroll

the original react-infinite has an issue whereby i am not able to scroll to the bottom. The only way to do so is to use useWindowAsScrollContainer. Would yours work just by using scrollContainer? If so how do i go about doing so?

Port to React 16

Hello,

I have installed the dependency with npm install react-infinite-any-height. I get the following NPM warnings:

npm WARN [email protected] requires a peer of react@^15.5.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@^15.5.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^15.5.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@^15.5.0 but none is installed. You must install peer dependencies yourself.

Do you plan to port the library to React 16?

Thank you!

Usage with infinite load

Hello,

could you please make an example with onInfiniteLoad(), when I try to set it on the InfiniteAnyHeight, sometimes when I scroll I get the following error:

Uncaught Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Thank you for your attention!

What to pass for scrollContainer?

It isn't clear what to pass to the scrollContainer prop. Can you please provide example code exercising this prop?

For reference, I'm passing this:

<div className="col-9" ref="scrollContainer">
      <InfiniteAnyHeight
        list={this.state.messageCards}
        containerHeight={500}
        scrollContainer={this.refs.scrollContainer}
        displayBottomUpwards>

      </InfiniteAnyHeight>
</div>

Which throws: Uncaught TypeError: Cannot read property 'scrollTop' of undefined

Warnings

Warning: React.__spread is deprecated and should not be used. Use Object.assign directly or another helper function with similar semantics. You may be seeing this warning due to your compiler. See https://fb.me/react-spread-deprecation for more details.printWarning @

Warning: a span tag (owner: GetHeightWrapper) was passed a numeric string value for CSS property content (value: ) which will be treated as a unitless number in a future version of React.