From 483c9358a0938fcd9023dae7933d938fd0f45790 Mon Sep 17 00:00:00 2001 From: Rein Date: Mon, 20 Nov 2023 15:59:25 +0100 Subject: [PATCH 1/2] Implement hideUnderWidth --- src/CurvedArrow.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/CurvedArrow.js b/src/CurvedArrow.js index 891c01b..acd1adc 100644 --- a/src/CurvedArrow.js +++ b/src/CurvedArrow.js @@ -42,6 +42,7 @@ class CurvedArrow extends React.PureComponent { middleY = 0, width = 8, color = "black", + hideUnderWidth = 0, hideIfFoundSelector, debugLine = false, dynamicUpdate = false, @@ -134,6 +135,14 @@ class CurvedArrow extends React.PureComponent { canvas.width = x_max - x_min; canvas.height = y_max - y_min; + if (hideUnderWidth > 0) { + if (window.matchMedia(`(max-width: ${hideUnderWidth}px)`).matches) { + canvas.style.display = "none"; + } else { + canvas.style.display = "inline-block"; + } + } + if (zIndex) { canvas.style.zIndex = zIndex; } From e02e4f47288f4a9892de4b20a068fb41ea6dd8bb Mon Sep 17 00:00:00 2001 From: Rein Date: Mon, 20 Nov 2023 16:01:01 +0100 Subject: [PATCH 2/2] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 4ebf34a..18c67a1 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,7 @@ import CurvedArrow from "react-curved-arrow"; |middleY|number|Middle point Y position.|0| |width|number|Width of the arrow and arrowhead.|8| |color|color|Color of the arrow and arrowhead.|"black"| +|hideUnderWidth|number|Optional. if the window width is lower then hideUnderWidth, then arrow will be hidden (display none).|0| |hideIfFoundSelector|DOM selector|Optional. if the arrow can find this selector, it will hide itself. Useful for product tours when you only want to show an arrow whenever a user hasn't performed an action yet such as opening a menu.|| |debugLine|boolean|Show debug dots and lines for fromOffset, toOffset and middle vectors.|false| |dynamicUpdate|boolean|Automatically adjust the arrow whenever the from/to DOM elements update. Useful for dynamic content such as sliding menus or content that is within a scrolling container.|false|