From c767cb1c026b9c2fac5269de62d21f6991f78c32 Mon Sep 17 00:00:00 2001
From: Eitan Elbaz <eitan.elbaz@uniledsolutions.com>
Date: Tue, 27 Jun 2023 16:16:12 +0100
Subject: [PATCH] updated readme

---
 README.md | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/README.md b/README.md
index bde988e..b55fae3 100644
--- a/README.md
+++ b/README.md
@@ -14,6 +14,7 @@
 - [Advanced Usage](#advanced-usage)
   - [Fast Moving Objects](#fast-moving-objects)
   - [Modal Anchoring](#modal-anchoring)
+  - [Component Visibility](#component-visibility)
   - [Style Overrides](#style-overrides)
   - [Overriding With Custom Components](#overriding-with-custom-components)
 
@@ -151,6 +152,38 @@ Want to highlight an element while anchoring the modal to its parent? No problem
 </ReactGrandTour>
 ```
 
+### Component Visibility
+
+You can force components to be hidden on a per step or per tour basis.
+
+The visibility prop on a step takes precedence over the hidden prop on the `ReactGrandTour` component.
+
+```jsx
+export type ComponentVisibility = {
+  hideCloseButton?: boolean;
+  hideCurrentStepLabel?: boolean;
+  hideNextStepButton?: boolean;
+  hidePreviousStepButton?: boolean;
+  hideStepButtons?: boolean;
+}
+
+<ReactGrandTour
+    // hides the close button for every step on the tour
+    hideCloseButton
+    steps={[
+        {
+            // hide the current step label for this particular step
+            hideCurrentStepLabel: true,
+            selector: '#my-step-id',
+            anchorSelector: '#my-step-id-parent',
+            content: 'Some Content',
+        },
+    ]}
+>
+    <App />
+</ReactGrandTour>
+```
+
 ### Style Overrides
 
 To achieve the look you desire you don't have to override the CSS classes or provide custom components. You can also override a lot of colors using the `stylingOverrides` prop.