Skip to content

Commit

Permalink
updated readme
Browse files Browse the repository at this point in the history
  • Loading branch information
Eitan Elbaz committed Jun 27, 2023
1 parent 1addd91 commit c767cb1
Showing 1 changed file with 33 additions and 0 deletions.
33 changes: 33 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down Expand Up @@ -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.
Expand Down

0 comments on commit c767cb1

Please sign in to comment.