@korsolutions/guidon 1.1.0 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +75 -3
- package/dist/commonjs/components/GuidonProvider.js +13 -15
- package/dist/commonjs/components/GuidonProvider.js.map +1 -1
- package/dist/module/components/GuidonProvider.js +15 -17
- package/dist/module/components/GuidonProvider.js.map +1 -1
- package/package.json +1 -1
- package/src/components/GuidonProvider.tsx +17 -17
package/README.md
CHANGED
|
@@ -1,6 +1,17 @@
|
|
|
1
1
|
# Guidon
|
|
2
2
|
|
|
3
|
-
A cross-platform walkthrough/onboarding
|
|
3
|
+
A lightweight, cross-platform walkthrough/onboarding library for React Native with web support. Features spotlight effects, draggable tooltips, and flexible persistence options.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **Zero state management dependencies** - Built with React's `useSyncExternalStore`
|
|
8
|
+
- **New Architecture ready** - Full support for React Native's Fabric renderer
|
|
9
|
+
- **Cross-platform** - iOS, Android, and Web (React Native Web)
|
|
10
|
+
- **Draggable tooltips** - Users can reposition tooltips by dragging
|
|
11
|
+
- **Multi-screen tours** - Guides pause when targets aren't mounted, resume when user navigates
|
|
12
|
+
- **Floating steps** - Create announcement/welcome screens without targeting elements
|
|
13
|
+
- **Flexible persistence** - Save progress to localStorage, AsyncStorage, or your API
|
|
14
|
+
- **Customizable** - Full theming, custom tooltip renderers, and per-step callbacks
|
|
4
15
|
|
|
5
16
|
## Installation
|
|
6
17
|
|
|
@@ -140,6 +151,60 @@ const config = {
|
|
|
140
151
|
} satisfies GuidonToursConfig;
|
|
141
152
|
```
|
|
142
153
|
|
|
154
|
+
## Draggable Tooltips
|
|
155
|
+
|
|
156
|
+
Enable draggable tooltips so users can reposition them if they're blocking content:
|
|
157
|
+
|
|
158
|
+
```tsx
|
|
159
|
+
const config = {
|
|
160
|
+
theme: {
|
|
161
|
+
tooltipDraggable: true,
|
|
162
|
+
dragHintText: 'Drag to reposition', // Optional custom hint
|
|
163
|
+
},
|
|
164
|
+
tours: {
|
|
165
|
+
// ...
|
|
166
|
+
},
|
|
167
|
+
} satisfies GuidonToursConfig;
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
When enabled:
|
|
171
|
+
- A hint ("Drag to move") appears on the first step
|
|
172
|
+
- Users can drag the tooltip to any position on screen
|
|
173
|
+
- Position resets when advancing to the next step
|
|
174
|
+
- Works on both mobile (touch) and web (mouse)
|
|
175
|
+
|
|
176
|
+
## Multi-Screen Tours
|
|
177
|
+
|
|
178
|
+
Tours can span multiple screens. When a step targets an element that isn't mounted yet, the guide shows a waiting state until the user navigates to the correct screen:
|
|
179
|
+
|
|
180
|
+
```tsx
|
|
181
|
+
const config = {
|
|
182
|
+
// Auto-skip after 10 seconds if target doesn't appear
|
|
183
|
+
defaultWaitTimeout: 10000,
|
|
184
|
+
tours: {
|
|
185
|
+
onboarding: {
|
|
186
|
+
id: 'onboarding',
|
|
187
|
+
steps: [
|
|
188
|
+
{ id: 'home', targetId: 'home-button', title: 'Welcome', description: 'Start here' },
|
|
189
|
+
{
|
|
190
|
+
id: 'settings',
|
|
191
|
+
targetId: 'settings-toggle', // On Settings screen
|
|
192
|
+
title: 'Settings',
|
|
193
|
+
description: 'Configure your preferences',
|
|
194
|
+
waitingMessage: 'Navigate to Settings to continue...', // Custom waiting text
|
|
195
|
+
},
|
|
196
|
+
],
|
|
197
|
+
},
|
|
198
|
+
},
|
|
199
|
+
} satisfies GuidonToursConfig;
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
The guide will:
|
|
203
|
+
1. Show a loading indicator when the target element isn't found
|
|
204
|
+
2. Display the `waitingMessage` (or default "Navigate to continue...")
|
|
205
|
+
3. Automatically resume when the user navigates and the target mounts
|
|
206
|
+
4. Optionally auto-skip after `defaultWaitTimeout` milliseconds
|
|
207
|
+
|
|
143
208
|
## Persistence
|
|
144
209
|
|
|
145
210
|
The library supports flexible persistence through adapters. You can save guidon progress to local storage, AsyncStorage, or your backend API.
|
|
@@ -315,6 +380,8 @@ interface GuidonTheme {
|
|
|
315
380
|
mutedColor?: string; // Secondary text color
|
|
316
381
|
spotlightBorderRadius?: number; // Spotlight cutout radius
|
|
317
382
|
spotlightPadding?: number; // Padding around spotlight
|
|
383
|
+
tooltipDraggable?: boolean; // Enable draggable tooltips (default: false)
|
|
384
|
+
dragHintText?: string; // Hint text shown on first step (default: 'Drag to move')
|
|
318
385
|
}
|
|
319
386
|
```
|
|
320
387
|
|
|
@@ -461,10 +528,15 @@ Disable auto-scroll for individual steps:
|
|
|
461
528
|
|
|
462
529
|
## Platform Support
|
|
463
530
|
|
|
464
|
-
- iOS
|
|
465
|
-
- Android
|
|
531
|
+
- iOS (New Architecture / Fabric supported)
|
|
532
|
+
- Android (New Architecture / Fabric supported)
|
|
466
533
|
- Web (React Native Web)
|
|
467
534
|
|
|
535
|
+
## Requirements
|
|
536
|
+
|
|
537
|
+
- React Native 0.71+ (for New Architecture support)
|
|
538
|
+
- React 18+ (for `useSyncExternalStore`)
|
|
539
|
+
|
|
468
540
|
## License
|
|
469
541
|
|
|
470
542
|
MIT
|
|
@@ -119,23 +119,21 @@ function GuidonProvider({
|
|
|
119
119
|
isCompleted,
|
|
120
120
|
isLoading
|
|
121
121
|
};
|
|
122
|
-
const
|
|
123
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GuidonOverlay.GuidonOverlay, {
|
|
124
|
-
theme: storeConfig?.theme,
|
|
125
|
-
animationDuration: storeConfig?.animationDuration,
|
|
126
|
-
onBackdropPress: onBackdropPress
|
|
127
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GuidonTooltip.GuidonTooltip, {
|
|
128
|
-
theme: storeConfig?.theme,
|
|
129
|
-
animationDuration: storeConfig?.animationDuration,
|
|
130
|
-
renderCustomTooltip: renderTooltip,
|
|
131
|
-
labels: tooltipLabels
|
|
132
|
-
})]
|
|
133
|
-
});
|
|
122
|
+
const Wrapper = Portal || _react.Fragment;
|
|
134
123
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GuidonContext.Provider, {
|
|
135
124
|
value: contextValue,
|
|
136
|
-
children: [children,
|
|
137
|
-
children:
|
|
138
|
-
|
|
125
|
+
children: [children, isActive && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
|
|
126
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GuidonOverlay.GuidonOverlay, {
|
|
127
|
+
theme: storeConfig?.theme,
|
|
128
|
+
animationDuration: storeConfig?.animationDuration,
|
|
129
|
+
onBackdropPress: onBackdropPress
|
|
130
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GuidonTooltip.GuidonTooltip, {
|
|
131
|
+
theme: storeConfig?.theme,
|
|
132
|
+
animationDuration: storeConfig?.animationDuration,
|
|
133
|
+
renderCustomTooltip: renderTooltip,
|
|
134
|
+
labels: tooltipLabels
|
|
135
|
+
})]
|
|
136
|
+
})]
|
|
139
137
|
});
|
|
140
138
|
}
|
|
141
139
|
//# sourceMappingURL=GuidonProvider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_hooks","_store","_GuidonOverlay","_GuidonTooltip","_jsxRuntime","GuidonContext","createContext","useGuidonContext","context","useContext","Error","GuidonProvider","children","persistenceAdapter","portalComponent","Portal","renderTooltip","tooltipLabels","onBackdropPress","isActive","useGuidonStore","state","storeIsCompleted","isCompleted","storeConfig","config","start","next","skip","reset","currentTargetId","useCurrentTargetId","isWaitingForTarget","useIsWaitingForTarget","nextRef","useRef","current","persistenceId","id","isLoading","persistedCompleted","clearProgress","useGuidonPersistence","waitTimerRef","useEffect","waitTimeout","defaultWaitTimeout","gracePeriod","clearTimeout","graceTimer","setTimeout","stillWaitingAfterGrace","getState","targetMeasurements","undefined","stillWaiting","replay","useCallback","tourId","requestAnimationFrame","manualStart","contextValue","
|
|
1
|
+
{"version":3,"names":["_react","require","_hooks","_store","_GuidonOverlay","_GuidonTooltip","_jsxRuntime","GuidonContext","createContext","useGuidonContext","context","useContext","Error","GuidonProvider","children","persistenceAdapter","portalComponent","Portal","renderTooltip","tooltipLabels","onBackdropPress","isActive","useGuidonStore","state","storeIsCompleted","isCompleted","storeConfig","config","start","next","skip","reset","currentTargetId","useCurrentTargetId","isWaitingForTarget","useIsWaitingForTarget","nextRef","useRef","current","persistenceId","id","isLoading","persistedCompleted","clearProgress","useGuidonPersistence","waitTimerRef","useEffect","waitTimeout","defaultWaitTimeout","gracePeriod","clearTimeout","graceTimer","setTimeout","stillWaitingAfterGrace","getState","targetMeasurements","undefined","stillWaiting","replay","useCallback","tourId","requestAnimationFrame","manualStart","contextValue","Wrapper","Fragment","jsxs","Provider","value","jsx","GuidonOverlay","theme","animationDuration","GuidonTooltip","renderCustomTooltip","labels"],"sourceRoot":"../../../src","sources":["components/GuidonProvider.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import { createContext, useCallback, useContext, useEffect, useRef } from "react";
|
|
3
|
+
import { createContext, Fragment, useCallback, useContext, useEffect, useRef } from "react";
|
|
4
4
|
import { useGuidonPersistence } from "../persistence/hooks.js";
|
|
5
5
|
import { useCurrentTargetId, useGuidonStore, useIsWaitingForTarget } from "../store.js";
|
|
6
6
|
import { GuidonOverlay } from "./GuidonOverlay.js";
|
|
7
7
|
import { GuidonTooltip } from "./GuidonTooltip.js";
|
|
8
|
-
import { jsx as _jsx,
|
|
8
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
9
|
const GuidonContext = /*#__PURE__*/createContext(null);
|
|
10
10
|
export function useGuidonContext() {
|
|
11
11
|
const context = useContext(GuidonContext);
|
|
@@ -114,23 +114,21 @@ export function GuidonProvider({
|
|
|
114
114
|
isCompleted,
|
|
115
115
|
isLoading
|
|
116
116
|
};
|
|
117
|
-
const
|
|
118
|
-
children: [/*#__PURE__*/_jsx(GuidonOverlay, {
|
|
119
|
-
theme: storeConfig?.theme,
|
|
120
|
-
animationDuration: storeConfig?.animationDuration,
|
|
121
|
-
onBackdropPress: onBackdropPress
|
|
122
|
-
}), /*#__PURE__*/_jsx(GuidonTooltip, {
|
|
123
|
-
theme: storeConfig?.theme,
|
|
124
|
-
animationDuration: storeConfig?.animationDuration,
|
|
125
|
-
renderCustomTooltip: renderTooltip,
|
|
126
|
-
labels: tooltipLabels
|
|
127
|
-
})]
|
|
128
|
-
});
|
|
117
|
+
const Wrapper = Portal || Fragment;
|
|
129
118
|
return /*#__PURE__*/_jsxs(GuidonContext.Provider, {
|
|
130
119
|
value: contextValue,
|
|
131
|
-
children: [children,
|
|
132
|
-
children:
|
|
133
|
-
|
|
120
|
+
children: [children, isActive && /*#__PURE__*/_jsxs(Wrapper, {
|
|
121
|
+
children: [/*#__PURE__*/_jsx(GuidonOverlay, {
|
|
122
|
+
theme: storeConfig?.theme,
|
|
123
|
+
animationDuration: storeConfig?.animationDuration,
|
|
124
|
+
onBackdropPress: onBackdropPress
|
|
125
|
+
}), /*#__PURE__*/_jsx(GuidonTooltip, {
|
|
126
|
+
theme: storeConfig?.theme,
|
|
127
|
+
animationDuration: storeConfig?.animationDuration,
|
|
128
|
+
renderCustomTooltip: renderTooltip,
|
|
129
|
+
labels: tooltipLabels
|
|
130
|
+
})]
|
|
131
|
+
})]
|
|
134
132
|
});
|
|
135
133
|
}
|
|
136
134
|
//# sourceMappingURL=GuidonProvider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createContext","useCallback","useContext","useEffect","useRef","useGuidonPersistence","useCurrentTargetId","useGuidonStore","useIsWaitingForTarget","GuidonOverlay","GuidonTooltip","jsx","_jsx","
|
|
1
|
+
{"version":3,"names":["createContext","Fragment","useCallback","useContext","useEffect","useRef","useGuidonPersistence","useCurrentTargetId","useGuidonStore","useIsWaitingForTarget","GuidonOverlay","GuidonTooltip","jsx","_jsx","jsxs","_jsxs","GuidonContext","useGuidonContext","context","Error","GuidonProvider","children","persistenceAdapter","portalComponent","Portal","renderTooltip","tooltipLabels","onBackdropPress","isActive","state","storeIsCompleted","isCompleted","storeConfig","config","start","next","skip","reset","currentTargetId","isWaitingForTarget","nextRef","current","persistenceId","id","isLoading","persistedCompleted","clearProgress","waitTimerRef","waitTimeout","defaultWaitTimeout","gracePeriod","clearTimeout","graceTimer","setTimeout","stillWaitingAfterGrace","getState","targetMeasurements","undefined","stillWaiting","replay","tourId","requestAnimationFrame","manualStart","contextValue","Wrapper","Provider","value","theme","animationDuration","renderCustomTooltip","labels"],"sourceRoot":"../../../src","sources":["components/GuidonProvider.tsx"],"mappings":";;AAAA,SAASA,aAAa,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,UAAU,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAC3F,SAASC,oBAAoB,QAAQ,yBAAsB;AAC3D,SACEC,kBAAkB,EAClBC,cAAc,EACdC,qBAAqB,QAChB,aAAU;AAEjB,SAASC,aAAa,QAAQ,oBAAiB;AAC/C,SAASC,aAAa,QAAQ,oBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAYhD,MAAMC,aAAa,gBAAGhB,aAAa,CAA4B,IAAI,CAAC;AAEpE,OAAO,SAASiB,gBAAgBA,CAAA,EAAG;EACjC,MAAMC,OAAO,GAAGf,UAAU,CAACa,aAAa,CAAC;EACzC,IAAI,CAACE,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CAAC,uDAAuD,CAAC;EAC1E;EACA,OAAOD,OAAO;AAChB;AAEA,OAAO,SAASE,cAAcA,CAAC;EAC7BC,QAAQ;EACRC,kBAAkB;EAClBC,eAAe,EAAEC,MAAM;EACvBC,aAAa;EACbC,aAAa;EACbC;AACmB,CAAC,EAAE;EACtB,MAAMC,QAAQ,GAAGpB,cAAc,CAAEqB,KAAkB,IAAKA,KAAK,CAACD,QAAQ,CAAC;EACvE,MAAME,gBAAgB,GAAGtB,cAAc,CACpCqB,KAAkB,IAAKA,KAAK,CAACE,WAChC,CAAC;EACD,MAAMC,WAAW,GAAGxB,cAAc,CAAEqB,KAAkB,IAAKA,KAAK,CAACI,MAAM,CAAC;EACxE,MAAMC,KAAK,GAAG1B,cAAc,CAAEqB,KAAkB,IAAKA,KAAK,CAACK,KAAK,CAAC;EACjE,MAAMC,IAAI,GAAG3B,cAAc,CAAEqB,KAAkB,IAAKA,KAAK,CAACM,IAAI,CAAC;EAC/D,MAAMC,IAAI,GAAG5B,cAAc,CAAEqB,KAAkB,IAAKA,KAAK,CAACO,IAAI,CAAC;EAC/D,MAAMC,KAAK,GAAG7B,cAAc,CAAEqB,KAAkB,IAAKA,KAAK,CAACQ,KAAK,CAAC;;EAEjE;EACA,MAAMC,eAAe,GAAG/B,kBAAkB,CAAC,CAAC;EAC5C,MAAMgC,kBAAkB,GAAG9B,qBAAqB,CAAC6B,eAAe,CAAC;;EAEjE;EACA,MAAME,OAAO,GAAGnC,MAAM,CAAC8B,IAAI,CAAC;EAC5BK,OAAO,CAACC,OAAO,GAAGN,IAAI;;EAEtB;EACA,MAAMO,aAAa,GAAGV,WAAW,EAAEW,EAAE,IAAI,oBAAoB;EAE7D,MAAM;IACJC,SAAS;IACTb,WAAW,EAAEc,kBAAkB;IAC/BC;EACF,CAAC,GAAGxC,oBAAoB,CAACgB,kBAAkB,EAAEoB,aAAa,CAAC;EAE3D,MAAMX,WAAW,GAAGD,gBAAgB,IAAIe,kBAAkB;;EAE1D;EACA,MAAME,YAAY,GAAG1C,MAAM,CAAuC,IAAI,CAAC;EAEvED,SAAS,CAAC,MAAM;IACd,MAAM4C,WAAW,GAAGhB,WAAW,EAAEiB,kBAAkB;IACnD;IACA;IACA,MAAMC,WAAW,GAAG,GAAG;;IAEvB;IACA,IAAIH,YAAY,CAACN,OAAO,EAAE;MACxBU,YAAY,CAACJ,YAAY,CAACN,OAAO,CAAC;MAClCM,YAAY,CAACN,OAAO,GAAG,IAAI;IAC7B;;IAEA;IACA;IACA;IACA,IAAI,CAACO,WAAW,IAAIA,WAAW,IAAI,CAAC,IAAI,CAACT,kBAAkB,IAAI,CAACD,eAAe,EAAE;MAC/E;IACF;;IAEA;IACA,MAAMc,UAAU,GAAGC,UAAU,CAAC,MAAM;MAClC,MAAMC,sBAAsB,GAAG9C,cAAc,CAAC+C,QAAQ,CAAC,CAAC,CAACC,kBAAkB,CAAClB,eAAe,CAAC,KAAKmB,SAAS;MAE1G,IAAI,CAACH,sBAAsB,EAAE;QAC3B;MACF;MAEAP,YAAY,CAACN,OAAO,GAAGY,UAAU,CAAC,MAAM;QACtC,MAAMK,YAAY,GAAGlD,cAAc,CAAC+C,QAAQ,CAAC,CAAC,CAACC,kBAAkB,CAAClB,eAAe,CAAC,KAAKmB,SAAS;QAChG,IAAIC,YAAY,EAAE;UAChBlB,OAAO,CAACC,OAAO,CAAC,CAAC;QACnB;QACAM,YAAY,CAACN,OAAO,GAAG,IAAI;MAC7B,CAAC,EAAEO,WAAW,CAAC;IACjB,CAAC,EAAEE,WAAW,CAAC;IAEf,OAAO,MAAM;MACXC,YAAY,CAACC,UAAU,CAAC;MACxB,IAAIL,YAAY,CAACN,OAAO,EAAE;QACxBU,YAAY,CAACJ,YAAY,CAACN,OAAO,CAAC;QAClCM,YAAY,CAACN,OAAO,GAAG,IAAI;MAC7B;IACF,CAAC;EACH,CAAC,EAAE,CAACT,WAAW,EAAEiB,kBAAkB,EAAEV,kBAAkB,EAAED,eAAe,CAAC,CAAC;EAE1E,MAAMqB,MAAM,GAAGzD,WAAW,CACxB,MAAO0D,MAAc,IAAK;IACxB,IAAItC,kBAAkB,EAAE;MACtB,MAAMwB,aAAa,CAAC,CAAC;IACvB;IACAT,KAAK,CAAC,CAAC;IACP;IACAwB,qBAAqB,CAAC,MAAM;MAC1B3B,KAAK,CAAC0B,MAAM,CAAC;IACf,CAAC,CAAC;EACJ,CAAC,EACD,CAACtC,kBAAkB,EAAEwB,aAAa,EAAET,KAAK,EAAEH,KAAK,CAClD,CAAC;EAED,MAAM4B,WAAW,GAAG5D,WAAW,CAC5B0D,MAAc,IAAK;IAClB,IAAI,CAAChC,QAAQ,IAAI,CAACgB,SAAS,EAAE;MAC3BV,KAAK,CAAC0B,MAAM,CAAC;IACf;EACF,CAAC,EACD,CAAChC,QAAQ,EAAEgB,SAAS,EAAEV,KAAK,CAC7B,CAAC;EAED,MAAM6B,YAAgC,GAAG;IACvC7B,KAAK,EAAE4B,WAAW;IAClB1B,IAAI;IACJC,KAAK;IACLsB,MAAM;IACN/B,QAAQ;IACRG,WAAW;IACXa;EACF,CAAC;EAED,MAAMoB,OAAO,GAAGxC,MAAM,IAAIvB,QAAQ;EAElC,oBACEc,KAAA,CAACC,aAAa,CAACiD,QAAQ;IAACC,KAAK,EAAEH,YAAa;IAAA1C,QAAA,GACzCA,QAAQ,EACRO,QAAQ,iBACPb,KAAA,CAACiD,OAAO;MAAA3C,QAAA,gBACNR,IAAA,CAACH,aAAa;QACZyD,KAAK,EAAEnC,WAAW,EAAEmC,KAAM;QAC1BC,iBAAiB,EAAEpC,WAAW,EAAEoC,iBAAkB;QAClDzC,eAAe,EAAEA;MAAgB,CAClC,CAAC,eACFd,IAAA,CAACF,aAAa;QACZwD,KAAK,EAAEnC,WAAW,EAAEmC,KAAM;QAC1BC,iBAAiB,EAAEpC,WAAW,EAAEoC,iBAAkB;QAClDC,mBAAmB,EAAE5C,aAAc;QACnC6C,MAAM,EAAE5C;MAAc,CACvB,CAAC;IAAA,CACK,CACV;EAAA,CACqB,CAAC;AAE7B","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@korsolutions/guidon",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"description": "A cross-platform walkthrough/onboarding component library for React Native with web support. Features spotlight effects, customizable tooltips, and flexible persistence options. ",
|
|
5
5
|
"repository": "https://github.com/KorSoftwareSolutions/guidon.git",
|
|
6
6
|
"author": "Christian Jimenez <christianjimenezfael@gmail.com>",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createContext, useCallback, useContext, useEffect, useRef } from "react";
|
|
1
|
+
import { createContext, Fragment, useCallback, useContext, useEffect, useRef } from "react";
|
|
2
2
|
import { useGuidonPersistence } from "../persistence/hooks";
|
|
3
3
|
import {
|
|
4
4
|
useCurrentTargetId,
|
|
@@ -147,26 +147,26 @@ export function GuidonProvider({
|
|
|
147
147
|
isLoading,
|
|
148
148
|
};
|
|
149
149
|
|
|
150
|
-
const
|
|
151
|
-
<>
|
|
152
|
-
<GuidonOverlay
|
|
153
|
-
theme={storeConfig?.theme}
|
|
154
|
-
animationDuration={storeConfig?.animationDuration}
|
|
155
|
-
onBackdropPress={onBackdropPress}
|
|
156
|
-
/>
|
|
157
|
-
<GuidonTooltip
|
|
158
|
-
theme={storeConfig?.theme}
|
|
159
|
-
animationDuration={storeConfig?.animationDuration}
|
|
160
|
-
renderCustomTooltip={renderTooltip}
|
|
161
|
-
labels={tooltipLabels}
|
|
162
|
-
/>
|
|
163
|
-
</>
|
|
164
|
-
);
|
|
150
|
+
const Wrapper = Portal || Fragment;
|
|
165
151
|
|
|
166
152
|
return (
|
|
167
153
|
<GuidonContext.Provider value={contextValue}>
|
|
168
154
|
{children}
|
|
169
|
-
{
|
|
155
|
+
{isActive && (
|
|
156
|
+
<Wrapper>
|
|
157
|
+
<GuidonOverlay
|
|
158
|
+
theme={storeConfig?.theme}
|
|
159
|
+
animationDuration={storeConfig?.animationDuration}
|
|
160
|
+
onBackdropPress={onBackdropPress}
|
|
161
|
+
/>
|
|
162
|
+
<GuidonTooltip
|
|
163
|
+
theme={storeConfig?.theme}
|
|
164
|
+
animationDuration={storeConfig?.animationDuration}
|
|
165
|
+
renderCustomTooltip={renderTooltip}
|
|
166
|
+
labels={tooltipLabels}
|
|
167
|
+
/>
|
|
168
|
+
</Wrapper>
|
|
169
|
+
)}
|
|
170
170
|
</GuidonContext.Provider>
|
|
171
171
|
);
|
|
172
172
|
}
|