melloware / react-logviewer

React Lazy LogViewer
https://melloware.github.io/react-logviewer/
Mozilla Public License 2.0
45 stars 10 forks source link

Using ScrollFollow results in maximum updates exceeded error #36

Closed kevinvugts closed 1 month ago

kevinvugts commented 1 month ago

Hi, when using the auto scroll functionality it currently results in an infinite loop.

melloware commented 1 month ago

can you put together a StackBlitz example showing the issue?

kevinvugts commented 1 month ago

@melloware I figured out that the issue happens when the outer div containing the doesn't have an height, the issue occurs. When you set an height on the outer div, the issue is gone

melloware commented 1 month ago

@kevinvugts can you post your sample code that works? I would like to update the README.MD. The current docs

import React from "react";
import { render } from "react-dom";
import { LazyLog, ScrollFollow } from "@melloware/react-logviewer";

render(
    <ScrollFollow
        startFollowing={true}
        render={({ follow, onScroll }) => (
            <LazyLog url="http://example.log" stream follow={follow} onScroll={onScroll} />
        )}
    />,
    document.getElementById("root"),
);
melloware commented 1 month ago

@kevinvugts ?

kevinvugts commented 1 month ago

@kevinvugts ?

GOodmorning melloware,

Just simply wrap the with a div containing a fixed height


<div style={{ height: 500, width: 902 }}>
  <ScrollFollow
    startFollowing
    render={({ onScroll, follow, startFollowing, stopFollowing }) => (
      <LazyLog extraLines={1} enableSearch url={url} stream onScroll={onScroll} follow={follow} />
    )}
  />
</div>```
melloware commented 1 month ago

Thanks docs updated! https://github.com/melloware/react-logviewer/blob/main/README.md