h-kanazawa / react-detectable-overflow Goto Github PK
View Code? Open in Web Editor NEWA React hook and component detecting overflow state.
License: MIT License
A React hook and component detecting overflow state.
License: MIT License
react-detectable-overflow/package.json
Line 21 in 7f42e75
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '[email protected]',
npm WARN EBADENGINE required: { node: '>=18' },
npm WARN EBADENGINE current: { node: 'v16.20.2', npm: '8.19.4' }
npm WARN EBADENGINE }
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.
add the ability to trigger overflow 1 time so that when resizing it does not trigger again, I need to detect overflow 1 time
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:
react-detectable-overflow/src/DetectableOverflow.tsx
Lines 73 to 78 in e68f739
Am I right? I'm fine with submitting a PR with this fix.
By the way, thank you for this great library!
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.
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;
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.