Git Product home page Git Product logo

react-detectable-overflow's Issues

Chrome zoom out -> false detection

Hi, I found a problem with false detection on Chrome (version 91.0.4472.124).
When I zoom out to 90% on a Demo, component triggers as overflowed.
image

I was trying to debug a problem, looks like bad rounding -> scrollWidth is smaller than offsetWidth. I changed a state detection like this and it seems to work fine for my case but don't know if its a right solution.
const newState = this.ref.current.offsetWidth < this.ref.current.scrollWidth || this.ref.current.offsetHeight < this.ref.current.scrollHeight;

overflow triggered 1 time

add the ability to trigger overflow 1 time so that when resizing it does not trigger again, I need to detect overflow 1 time

No output

I have a table in an absolutely positioned div and the div is set to overflow-y. The vertical scroll bar on the div appears when the table is too long for the div.

Do I wrap the div in DetectableOverflow or should I replace the div with DetectableOverflow?

Either way I'm getting no output from the component.

findDOMNode is deprecated in StrictMode

Hi there!

I've noticed this warning in the console while using react-detectable-overflow:

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of ChildWrapper which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node

This is actually a warning shown from the package react-resize-detector that this library uses. As stated in the README, a ref is needed to not use the deprecated findDOMNode.

I believe that a ref is needed in the children that is received and then passed using targetRef to the ReactResizeDetector component over here:

return React.createElement(
tag,
props,
<ReactResizeDetector handleWidth onResize={this.updateState} />,
this.props.children,
);

Am I right? I'm fine with submitting a PR with this fix.

By the way, thank you for this great library!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.