react-detectable-overflow
Advanced tools
Comparing version
@@ -8,2 +8,4 @@ import * as React from 'react'; | ||
children?: React.ReactNode; | ||
handleHeight?: boolean; | ||
handleWidth?: boolean; | ||
} | ||
@@ -10,0 +12,0 @@ export interface States { |
@@ -73,4 +73,5 @@ "use strict"; | ||
} | ||
var newState = this.ref.current.offsetWidth < this.ref.current.scrollWidth || | ||
this.ref.current.offsetHeight < this.ref.current.scrollHeight; | ||
var _a = this.props, _b = _a.handleWidth, handleWidth = _b === void 0 ? true : _b, _c = _a.handleHeight, handleHeight = _c === void 0 ? true : _c; | ||
var newState = (handleWidth && this.ref.current.offsetWidth < this.ref.current.scrollWidth) || | ||
(handleHeight && this.ref.current.offsetHeight < this.ref.current.scrollHeight); | ||
if (newState === this.state.overflow) { | ||
@@ -77,0 +78,0 @@ return; |
/// <reference types="react" /> | ||
export interface useOverflowDetectorProps { | ||
onChange?: (overflow: boolean) => void; | ||
handleHeight?: boolean; | ||
handleWidth?: boolean; | ||
} | ||
@@ -5,0 +7,0 @@ export declare function useOverflowDetector(props?: useOverflowDetectorProps): { |
@@ -14,3 +14,5 @@ "use strict"; | ||
} | ||
var newState = ref.current.offsetWidth < ref.current.scrollWidth || ref.current.offsetHeight < ref.current.scrollHeight; | ||
var _a = props.handleWidth, handleWidth = _a === void 0 ? true : _a, _b = props.handleHeight, handleHeight = _b === void 0 ? true : _b; | ||
var newState = (handleWidth && ref.current.offsetWidth < ref.current.scrollWidth) || | ||
(handleHeight && ref.current.offsetHeight < ref.current.scrollHeight); | ||
if (newState === overflow) { | ||
@@ -23,3 +25,3 @@ return; | ||
} | ||
}, [ref.current, props.onChange, setOverflow, overflow]); | ||
}, [ref.current, props.handleWidth, props.handleHeight, props.onChange, setOverflow, overflow]); | ||
(0, react_resize_detector_1.useResizeDetector)({ | ||
@@ -26,0 +28,0 @@ targetRef: ref, |
{ | ||
"name": "react-detectable-overflow", | ||
"version": "0.7.2", | ||
"version": "0.8.0", | ||
"description": "React hook/component to detect overflow state", | ||
@@ -23,3 +23,3 @@ "author": { | ||
"scripts": { | ||
"build": "rimraf ./dist/* && tsc --build tsconfig.json", | ||
"build": "git clean -dfx ./dist/ && tsc --build tsconfig.json", | ||
"jest": "jest", | ||
@@ -29,11 +29,8 @@ "test": "yarn jest" | ||
"devDependencies": { | ||
"@types/jest": "^26.0.24", | ||
"@types/jest": "^29.5.12", | ||
"@types/react": "^18.0.27", | ||
"@types/react-dom": "^18.0.10", | ||
"@types/sinon": "^7.5.1", | ||
"jest": "26.6.0", | ||
"rimraf": "^3.0.2", | ||
"sinon": "^8.0.4", | ||
"ts-jest": "26.5.0", | ||
"typescript": "^4.3.5" | ||
"jest": "^29.7.0", | ||
"ts-jest": "^29.1.2", | ||
"typescript": "^5.4.3" | ||
}, | ||
@@ -40,0 +37,0 @@ "dependencies": { |
@@ -97,2 +97,6 @@ # React Detectable Overflow | ||
#### 0.8.0 | ||
- Add properties `handleHeight` and `handleWidth` | ||
#### 0.7.0 | ||
@@ -99,0 +103,0 @@ |
@@ -6,2 +6,4 @@ import { useCallback, useState, useRef, useEffect } from 'react'; | ||
onChange?: (overflow: boolean) => void; | ||
handleHeight?: boolean | ||
handleWidth?: boolean | ||
} | ||
@@ -17,4 +19,9 @@ | ||
} | ||
const { handleWidth = true, handleHeight = true } = props; | ||
const newState = | ||
ref.current.offsetWidth < ref.current.scrollWidth || ref.current.offsetHeight < ref.current.scrollHeight; | ||
(handleWidth && ref.current.offsetWidth < ref.current.scrollWidth) || | ||
(handleHeight && ref.current.offsetHeight < ref.current.scrollHeight); | ||
if (newState === overflow) { | ||
@@ -27,3 +34,3 @@ return; | ||
} | ||
}, [ref.current, props.onChange, setOverflow, overflow]); | ||
}, [ref.current, props.handleWidth, props.handleHeight, props.onChange, setOverflow, overflow]); | ||
@@ -30,0 +37,0 @@ useResizeDetector({ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
20125
6.83%6
-33.33%20
5.26%312
4.7%108
3.85%