@rio-cloud/uikit-mcp 1.1.5 → 1.1.7
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/dist/doc-metadata.json +129 -29
- package/dist/docs/components/accentBar.md +2 -2
- package/dist/docs/components/activity.md +2 -2
- package/dist/docs/components/animatedNumber.md +3 -3
- package/dist/docs/components/animatedTextReveal.md +7 -7
- package/dist/docs/components/animations.md +33 -33
- package/dist/docs/components/appHeader.md +8 -8
- package/dist/docs/components/appLayout.md +106 -89
- package/dist/docs/components/appNavigationBar.md +2 -2
- package/dist/docs/components/areaCharts.md +14 -14
- package/dist/docs/components/aspectRatioPlaceholder.md +2 -2
- package/dist/docs/components/assetTree.md +209 -404
- package/dist/docs/components/autosuggests.md +2 -2
- package/dist/docs/components/avatar.md +2 -2
- package/dist/docs/components/banner.md +3 -3
- package/dist/docs/components/barCharts.md +24 -24
- package/dist/docs/components/barList.md +11 -11
- package/dist/docs/components/basicMap.md +2 -2
- package/dist/docs/components/bottomSheet.md +2 -2
- package/dist/docs/components/button.md +400 -32
- package/dist/docs/components/buttonToolbar.md +2 -2
- package/dist/docs/components/calendarStripe.md +96 -36
- package/dist/docs/components/card.md +2 -2
- package/dist/docs/components/carousel.md +2 -2
- package/dist/docs/components/chartColors.md +2 -2
- package/dist/docs/components/chartsGettingStarted.md +2 -2
- package/dist/docs/components/chat.md +3 -3
- package/dist/docs/components/checkbox.md +17 -20
- package/dist/docs/components/circularProgress.md +465 -0
- package/dist/docs/components/clearableInput.md +2 -2
- package/dist/docs/components/collapse.md +3 -3
- package/dist/docs/components/composedCharts.md +20 -20
- package/dist/docs/components/contentLoader.md +102 -102
- package/dist/docs/components/dataTabs.md +10 -10
- package/dist/docs/components/datepickers.md +31 -31
- package/dist/docs/components/dialogs.md +2 -2
- package/dist/docs/components/divider.md +2 -2
- package/dist/docs/components/dropdowns.md +4354 -4387
- package/dist/docs/components/editableContent.md +2 -2
- package/dist/docs/components/expander.md +2 -2
- package/dist/docs/components/fade.md +2 -2
- package/dist/docs/components/fadeExpander.md +3 -3
- package/dist/docs/components/fadeUp.md +3 -3
- package/dist/docs/components/feedback.md +2 -2
- package/dist/docs/components/filePickers.md +2 -2
- package/dist/docs/components/formLabel.md +5 -4
- package/dist/docs/components/groupedItemList.md +2 -2
- package/dist/docs/components/iconList.md +4 -4
- package/dist/docs/components/imagePreloader.md +2 -2
- package/dist/docs/components/labeledElement.md +2 -2
- package/dist/docs/components/licensePlate.md +2 -2
- package/dist/docs/components/lineCharts.md +11 -11
- package/dist/docs/components/listMenu.md +7 -7
- package/dist/docs/components/loadMore.md +2 -2
- package/dist/docs/components/mainNavigation.md +5 -5
- package/dist/docs/components/mapCircle.md +2 -2
- package/dist/docs/components/mapCluster.md +2 -2
- package/dist/docs/components/mapContext.md +2 -2
- package/dist/docs/components/mapDraggableMarker.md +2 -2
- package/dist/docs/components/mapGettingStarted.md +2 -2
- package/dist/docs/components/mapInfoBubble.md +2 -2
- package/dist/docs/components/mapLayerGroup.md +2 -2
- package/dist/docs/components/mapMarker.md +2 -2
- package/dist/docs/components/mapPolygon.md +2 -2
- package/dist/docs/components/mapRoute.md +2 -2
- package/dist/docs/components/mapRouteGenerator.md +2 -2
- package/dist/docs/components/mapSettings.md +9 -9
- package/dist/docs/components/mapUtils.md +2 -2
- package/dist/docs/components/multiselects.md +2 -2
- package/dist/docs/components/noData.md +2 -2
- package/dist/docs/components/notifications.md +2 -2
- package/dist/docs/components/numbercontrol.md +5 -4
- package/dist/docs/components/onboarding.md +2 -2
- package/dist/docs/components/page.md +2 -2
- package/dist/docs/components/pager.md +2 -2
- package/dist/docs/components/pieCharts.md +89 -78
- package/dist/docs/components/popover.md +2 -2
- package/dist/docs/components/position.md +2 -2
- package/dist/docs/components/radialBarCharts.md +2054 -2012
- package/dist/docs/components/radioCardGroup.md +487 -0
- package/dist/docs/components/radiobutton.md +2 -2
- package/dist/docs/components/releaseNotes.md +2 -2
- package/dist/docs/components/resizer.md +2 -2
- package/dist/docs/components/responsiveColumnStripe.md +2 -2
- package/dist/docs/components/responsiveVideo.md +2 -2
- package/dist/docs/components/rioglyph.md +2 -2
- package/dist/docs/components/rules.md +2 -2
- package/dist/docs/components/saveableInput.md +20 -20
- package/dist/docs/components/selects.md +2 -2
- package/dist/docs/components/sidebar.md +2 -2
- package/dist/docs/components/sliders.md +2 -2
- package/dist/docs/components/smoothScrollbars.md +2 -2
- package/dist/docs/components/spinners.md +2 -2
- package/dist/docs/components/states.md +2 -2
- package/dist/docs/components/statsWidgets.md +2 -2
- package/dist/docs/components/statusBar.md +2 -2
- package/dist/docs/components/stepButton.md +2 -2
- package/dist/docs/components/steppedProgressBars.md +2 -2
- package/dist/docs/components/subNavigation.md +17 -17
- package/dist/docs/components/supportMarker.md +2 -2
- package/dist/docs/components/svgImage.md +38 -2
- package/dist/docs/components/switch.md +210 -83
- package/dist/docs/components/tables.md +2 -2
- package/dist/docs/components/tagManager.md +2 -2
- package/dist/docs/components/tags.md +2 -2
- package/dist/docs/components/teaser.md +2 -2
- package/dist/docs/components/textTruncateMiddle.md +151 -0
- package/dist/docs/components/timeline.md +2 -2
- package/dist/docs/components/timepicker.md +660 -64
- package/dist/docs/components/toggleButton.md +37 -9
- package/dist/docs/components/tooltip.md +5 -4
- package/dist/docs/components/tracker.md +631 -0
- package/dist/docs/components/virtualList.md +77 -77
- package/dist/docs/foundations.md +594 -222
- package/dist/docs/start/changelog.md +54 -2
- package/dist/docs/start/goodtoknow.md +2 -2
- package/dist/docs/start/guidelines/color-combinations.md +2 -2
- package/dist/docs/start/guidelines/custom-css.md +2 -2
- package/dist/docs/start/guidelines/custom-rioglyph.md +2 -2
- package/dist/docs/start/guidelines/formatting.md +2 -2
- package/dist/docs/start/guidelines/iframe.md +3 -3
- package/dist/docs/start/guidelines/obfuscate-data.md +2 -2
- package/dist/docs/start/guidelines/print-css.md +2 -2
- package/dist/docs/start/guidelines/spinner.md +82 -82
- package/dist/docs/start/guidelines/state-in-url.md +263 -0
- package/dist/docs/start/guidelines/supported-browsers.md +2 -2
- package/dist/docs/start/guidelines/writing.md +2 -2
- package/dist/docs/start/howto.md +10 -10
- package/dist/docs/start/intro.md +2 -2
- package/dist/docs/start/responsiveness.md +2 -2
- package/dist/docs/templates/common-table.md +15 -14
- package/dist/docs/templates/detail-views.md +3 -3
- package/dist/docs/templates/expandable-details.md +2 -2
- package/dist/docs/templates/feature-cards.md +56 -56
- package/dist/docs/templates/form-summary.md +23 -23
- package/dist/docs/templates/form-toggle.md +2 -2
- package/dist/docs/templates/list-blocks.md +204 -204
- package/dist/docs/templates/loading-progress.md +2 -2
- package/dist/docs/templates/options-panel.md +2 -2
- package/dist/docs/templates/panel-variants.md +2 -2
- package/dist/docs/templates/progress-cards.md +2 -2
- package/dist/docs/templates/progress-success.md +2 -2
- package/dist/docs/templates/settings-form.md +24 -24
- package/dist/docs/templates/stats-blocks.md +15 -15
- package/dist/docs/templates/table-panel.md +2 -2
- package/dist/docs/templates/table-row-animation.md +2 -2
- package/dist/docs/templates/usage-cards.md +2 -2
- package/dist/docs/utilities/classNames.md +191 -0
- package/dist/docs/utilities/deviceUtils.md +2 -2
- package/dist/docs/utilities/featureToggles.md +2 -2
- package/dist/docs/utilities/fuelTypeUtils.md +2 -2
- package/dist/docs/utilities/routeUtils.md +326 -90
- package/dist/docs/utilities/useAfterMount.md +2 -2
- package/dist/docs/utilities/useAutoAnimate.md +2 -2
- package/dist/docs/utilities/useAverage.md +2 -2
- package/dist/docs/utilities/useClickOutside.md +2 -2
- package/dist/docs/utilities/useClipboard.md +3 -3
- package/dist/docs/utilities/useCookies.md +188 -0
- package/dist/docs/utilities/useCount.md +2 -2
- package/dist/docs/utilities/useDarkMode.md +2 -2
- package/dist/docs/utilities/useDebugInfo.md +5 -5
- package/dist/docs/utilities/useEffectOnce.md +2 -2
- package/dist/docs/utilities/useElapsedTime.md +2 -2
- package/dist/docs/utilities/useElementSize.md +2 -2
- package/dist/docs/utilities/useEsc.md +2 -2
- package/dist/docs/utilities/useEvent.md +2 -2
- package/dist/docs/utilities/useFocusTrap.md +2 -2
- package/dist/docs/utilities/useFullscreen.md +2 -2
- package/dist/docs/utilities/useHover.md +2 -2
- package/dist/docs/utilities/useIncomingPostMessages.md +2 -2
- package/dist/docs/utilities/useInterval.md +2 -2
- package/dist/docs/utilities/useIsFocusWithin.md +2 -2
- package/dist/docs/utilities/useKey.md +2 -2
- package/dist/docs/utilities/useLocalStorage.md +2 -2
- package/dist/docs/utilities/useLocationSuggestions.md +2 -2
- package/dist/docs/utilities/useMax.md +2 -2
- package/dist/docs/utilities/useMin.md +2 -2
- package/dist/docs/utilities/useMutationObserver.md +2 -2
- package/dist/docs/utilities/useOnScreen.md +2 -2
- package/dist/docs/utilities/useOnlineStatus.md +2 -2
- package/dist/docs/utilities/usePostMessage.md +3 -3
- package/dist/docs/utilities/usePostMessageSender.md +2 -2
- package/dist/docs/utilities/usePrevious.md +2 -2
- package/dist/docs/utilities/useResizeObserver.md +2 -2
- package/dist/docs/utilities/useRioCookieConsent.md +90 -0
- package/dist/docs/utilities/useScrollPosition.md +2 -2
- package/dist/docs/utilities/useSearch.md +2 -2
- package/dist/docs/utilities/useSearchHighlight.md +815 -0
- package/dist/docs/utilities/useSorting.md +2 -2
- package/dist/docs/utilities/useStateWithValidation.md +2 -2
- package/dist/docs/utilities/useSum.md +2 -2
- package/dist/docs/utilities/useTableExport.md +52 -52
- package/dist/docs/utilities/useTableSelection.md +90 -90
- package/dist/docs/utilities/useTimeout.md +2 -2
- package/dist/docs/utilities/useToggle.md +3 -3
- package/dist/docs/utilities/useUrlState.md +418 -0
- package/dist/docs/utilities/useWindowResize.md +2 -2
- package/dist/index.mjs +1 -1
- package/dist/version.json +2 -2
- package/package.json +9 -9
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
# useCookies
|
|
2
|
+
|
|
3
|
+
*Category:* Utilities
|
|
4
|
+
*Section:* Browser & device hooks
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/useCookies
|
|
6
|
+
*Captured:* 2026-02-23T15:49:53.769Z
|
|
7
|
+
|
|
8
|
+
The useCookies hook allows you to set cookies, delete cookies and check whether a cookie exists in the browser.
|
|
9
|
+
|
|
10
|
+
## useCookies
|
|
11
|
+
|
|
12
|
+
### Example: Cookie Name
|
|
13
|
+
|
|
14
|
+
Cookie Name
|
|
15
|
+
|
|
16
|
+
Cookie Value
|
|
17
|
+
|
|
18
|
+
Set CookieCheck CookieDelete Cookie
|
|
19
|
+
|
|
20
|
+
#### Summary
|
|
21
|
+
|
|
22
|
+
Cookie Name
|
|
23
|
+
|
|
24
|
+
Cookie Value
|
|
25
|
+
|
|
26
|
+
Set CookieCheck CookieDelete Cookie
|
|
27
|
+
|
|
28
|
+
#### React (tsx)
|
|
29
|
+
|
|
30
|
+
```tsx
|
|
31
|
+
import { useEffect, useState } from 'react';
|
|
32
|
+
|
|
33
|
+
import Button from '@rio-cloud/rio-uikit/Button';
|
|
34
|
+
import ClearableInput from '@rio-cloud/rio-uikit/ClearableInput';
|
|
35
|
+
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
|
|
36
|
+
import Notification from '@rio-cloud/rio-uikit/Notification';
|
|
37
|
+
import useCookies from '@rio-cloud/rio-uikit/useCookies';
|
|
38
|
+
|
|
39
|
+
export default () => {
|
|
40
|
+
const { setCookie, deleteCookie, hasCookie, getCookie } = useCookies();
|
|
41
|
+
const [cookieName, setCookieName] = useState('uikit.demo.cookie');
|
|
42
|
+
const [cookieValue, setCookieValue] = useState('I WANT COOKIES');
|
|
43
|
+
const [cookieSync, setCookieSync] = useState(0);
|
|
44
|
+
const cookieExists = hasCookie(cookieName);
|
|
45
|
+
const currentCookieValue = getCookie(cookieName);
|
|
46
|
+
const currentDomain = typeof window !== 'undefined' ? window.location.hostname : '-';
|
|
47
|
+
|
|
48
|
+
const refreshCookieSync = () => {
|
|
49
|
+
setCookieSync(prev => prev + 1);
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
useEffect(() => {
|
|
53
|
+
const intervalId = window.setInterval(() => {
|
|
54
|
+
setCookieSync(prev => prev + 1);
|
|
55
|
+
}, 1000);
|
|
56
|
+
|
|
57
|
+
return () => window.clearInterval(intervalId);
|
|
58
|
+
}, []);
|
|
59
|
+
|
|
60
|
+
const handleSetCookie = () => {
|
|
61
|
+
setCookie(cookieName, cookieValue, {
|
|
62
|
+
path: '/',
|
|
63
|
+
maxAge: 60 * 60,
|
|
64
|
+
sameSite: 'Lax',
|
|
65
|
+
});
|
|
66
|
+
refreshCookieSync();
|
|
67
|
+
Notification.success(`Cookie "${cookieName}" wurde gesetzt.`);
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
const handleCheckCookie = () => {
|
|
71
|
+
const exists = hasCookie(cookieName);
|
|
72
|
+
refreshCookieSync();
|
|
73
|
+
if (exists) {
|
|
74
|
+
Notification.info(`Cookie "${cookieName}" ist gesetzt.`);
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
Notification.warning(`Cookie "${cookieName}" ist nicht gesetzt.`);
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
const handleDeleteCookie = () => {
|
|
81
|
+
deleteCookie(cookieName, { path: '/' });
|
|
82
|
+
refreshCookieSync();
|
|
83
|
+
Notification.info(`Cookie "${cookieName}" wurde gelöscht.`);
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
return (
|
|
87
|
+
<div className='max-width-600'>
|
|
88
|
+
<div className='display-flex gap-10 flex-wrap'>
|
|
89
|
+
<div className='margin-bottom-15 flex-1-1 min-width-200'>
|
|
90
|
+
<FormLabel>Cookie Name</FormLabel>
|
|
91
|
+
<ClearableInput
|
|
92
|
+
value={cookieName}
|
|
93
|
+
onChange={(newValue: string) => setCookieName(newValue)}
|
|
94
|
+
onClear={() => {
|
|
95
|
+
setCookieName('');
|
|
96
|
+
refreshCookieSync();
|
|
97
|
+
}}
|
|
98
|
+
/>
|
|
99
|
+
</div>
|
|
100
|
+
<div className='margin-bottom-15 flex-1-1 min-width-200'>
|
|
101
|
+
<FormLabel>Cookie Value</FormLabel>
|
|
102
|
+
<ClearableInput
|
|
103
|
+
value={cookieValue}
|
|
104
|
+
onChange={(newValue: string) => setCookieValue(newValue)}
|
|
105
|
+
onClear={() => setCookieValue('')}
|
|
106
|
+
/>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
<div className='btn-toolbar margin-bottom-15'>
|
|
110
|
+
<Button onClick={handleSetCookie}>Set Cookie</Button>
|
|
111
|
+
<Button onClick={handleCheckCookie}>Check Cookie</Button>
|
|
112
|
+
<Button onClick={handleDeleteCookie}>Delete Cookie</Button>
|
|
113
|
+
</div>
|
|
114
|
+
{cookieExists && (
|
|
115
|
+
<div className='alert alert-info' data-cookie-sync={cookieSync}>
|
|
116
|
+
<div>
|
|
117
|
+
<strong>Name:</strong> {cookieName}
|
|
118
|
+
</div>
|
|
119
|
+
<div>
|
|
120
|
+
<strong>Domain:</strong> {currentDomain}
|
|
121
|
+
</div>
|
|
122
|
+
<div>
|
|
123
|
+
<strong>Value:</strong> {currentCookieValue ?? '-'}
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
)}
|
|
127
|
+
</div>
|
|
128
|
+
);
|
|
129
|
+
};
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
#### HTML (html)
|
|
133
|
+
|
|
134
|
+
```html
|
|
135
|
+
<div class="max-width-600">
|
|
136
|
+
<div class="display-flex gap-10 flex-wrap">
|
|
137
|
+
<div class="margin-bottom-15 flex-1-1 min-width-200">
|
|
138
|
+
<div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Cookie Name</div>
|
|
139
|
+
<div class="ClearableInput input-group">
|
|
140
|
+
<input class="form-control withClearButton" type="text" tabindex="0" value="uikit.demo.cookie">
|
|
141
|
+
<span class="clearButton">
|
|
142
|
+
<span class="clearButtonIcon rioglyph rioglyph-remove-sign">
|
|
143
|
+
</span>
|
|
144
|
+
</span>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
<div class="margin-bottom-15 flex-1-1 min-width-200">
|
|
148
|
+
<div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Cookie Value</div>
|
|
149
|
+
<div class="ClearableInput input-group">
|
|
150
|
+
<input class="form-control withClearButton" type="text" tabindex="0" value="I WANT COOKIES">
|
|
151
|
+
<span class="clearButton">
|
|
152
|
+
<span class="clearButtonIcon rioglyph rioglyph-remove-sign">
|
|
153
|
+
</span>
|
|
154
|
+
</span>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
</div>
|
|
158
|
+
<div class="btn-toolbar margin-bottom-15">
|
|
159
|
+
<button type="button" class="btn btn-default btn-component" tabindex="0">Set Cookie</button>
|
|
160
|
+
<button type="button" class="btn btn-default btn-component" tabindex="0">Check Cookie</button>
|
|
161
|
+
<button type="button" class="btn btn-default btn-component" tabindex="0">Delete Cookie</button>
|
|
162
|
+
</div>
|
|
163
|
+
</div>
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
#### Props: Return value
|
|
167
|
+
|
|
168
|
+
### Return value
|
|
169
|
+
|
|
170
|
+
| Name | Type | Default | Description |
|
|
171
|
+
| --- | --- | --- | --- |
|
|
172
|
+
| setCookie | (name: string, value: string, options?: CookieOptions) => void | — | Sets a cookie with optional metadata. |
|
|
173
|
+
| deleteCookie | (name: string, options?: Pick<CookieOptions, 'path' \| 'domain'>) => void | — | Deletes a cookie by name. |
|
|
174
|
+
| hasCookie | (name: string) => boolean | — | Returns true if the cookie exists. |
|
|
175
|
+
| getCookie | (name: string) => string \| undefined | — | Reads a cookie value. |
|
|
176
|
+
|
|
177
|
+
#### Props: CookieOptions
|
|
178
|
+
|
|
179
|
+
### CookieOptions
|
|
180
|
+
|
|
181
|
+
| Name | Type | Default | Description |
|
|
182
|
+
| --- | --- | --- | --- |
|
|
183
|
+
| path | string | '/' | Cookie path scope. |
|
|
184
|
+
| domain | string | — | Cookie domain scope (for example .rio.cloud). |
|
|
185
|
+
| expires | Date \| string | — | Absolute expiration date for the cookie. |
|
|
186
|
+
| maxAge | number | — | Cookie lifetime in seconds. |
|
|
187
|
+
| sameSite | CookieSameSite | — | Cross-site cookie behavior. Possible values are: Strict Lax None |
|
|
188
|
+
| secure | boolean | — | Adds the Secure flag so the cookie is sent over HTTPS only. |
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Data aggregation hooks
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-02-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/useCount
|
|
6
|
+
*Captured:* 2026-02-23T15:50:00.891Z
|
|
7
7
|
|
|
8
8
|
useCount is a utility hook for counting how many objects in a list contain a specific value or match a custom condition at a given property path. It supports exact value matching (e.g. true, 0, 'PENDING') or predicate-based logic using a match function. By default, all values that are not null or undefined are counted.
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Browser & device hooks
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-02-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/useDarkMode
|
|
6
|
+
*Captured:* 2026-02-23T15:49:53.956Z
|
|
7
7
|
|
|
8
8
|
The useDarkMode hook enables you to listen for the color scheme change and react accordingly.
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* UI state & input hooks
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-02-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/useDebugInfo
|
|
6
|
+
*Captured:* 2026-02-23T15:49:57.671Z
|
|
7
7
|
|
|
8
8
|
The useDebugInfo hook allows to return detailed information about render count, render time and changed component props and also to print these information to the console.
|
|
9
9
|
|
|
@@ -18,7 +18,7 @@ Debug Info:{
|
|
|
18
18
|
"renderCount": 1,
|
|
19
19
|
"changedProps": {},
|
|
20
20
|
"timeSinceLastRender": 0,
|
|
21
|
-
"lastRenderTimestamp":
|
|
21
|
+
"lastRenderTimestamp": 1771861796836
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
ToggleIncrement
|
|
@@ -32,7 +32,7 @@ Debug Info:{
|
|
|
32
32
|
"renderCount": 1,
|
|
33
33
|
"changedProps": {},
|
|
34
34
|
"timeSinceLastRender": 0,
|
|
35
|
-
"lastRenderTimestamp":
|
|
35
|
+
"lastRenderTimestamp": 1771861796836
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
ToggleIncrement
|
|
@@ -107,7 +107,7 @@ export default () => {
|
|
|
107
107
|
"renderCount": 1,
|
|
108
108
|
"changedProps": {},
|
|
109
109
|
"timeSinceLastRender": 0,
|
|
110
|
-
"lastRenderTimestamp":
|
|
110
|
+
"lastRenderTimestamp": 1771861796836
|
|
111
111
|
}</pre>
|
|
112
112
|
</div>
|
|
113
113
|
</div>
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Lifecycle & execution hooks
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-02-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/useEffectOnce
|
|
6
|
+
*Captured:* 2026-02-23T15:49:44.445Z
|
|
7
7
|
|
|
8
8
|
The useEffectOnce hook allows to use a side effect only once after the component has been mounted.
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Lifecycle & execution hooks
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-02-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/useElapsedTime
|
|
6
|
+
*Captured:* 2026-02-23T15:49:44.613Z
|
|
7
7
|
|
|
8
8
|
## useElapsedTime
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-02-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/useElementSize
|
|
6
|
+
*Captured:* 2026-02-23T15:49:47.497Z
|
|
7
7
|
|
|
8
8
|
The useElementSize hook allows to easily detect an elements dimension.
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-02-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/useEsc
|
|
6
|
+
*Captured:* 2026-02-23T15:49:47.688Z
|
|
7
7
|
|
|
8
8
|
The useEsc hook allows to easily detect keydown events for escape key to to react on. This comes in handy when closing something or aborting some operation on esc.
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* UI state & input hooks
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-02-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/useEvent
|
|
6
|
+
*Captured:* 2026-02-23T15:49:57.667Z
|
|
7
7
|
|
|
8
8
|
The useEvent hook allows to easily detect given events registered on the document.
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-02-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/useFocusTrap
|
|
6
|
+
*Captured:* 2026-02-23T15:49:48.206Z
|
|
7
7
|
|
|
8
8
|
This custom hook allows to keep the focus inside a defined wrapper element. This might be a dialog or a custom overlay.
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-02-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/useFullscreen
|
|
6
|
+
*Captured:* 2026-02-23T15:49:49.730Z
|
|
7
7
|
|
|
8
8
|
The cross-browser useFullscreen hook allows to easily switch to fullscreen mode for the document or a dedicated element like a map or a certain part of a service.
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-02-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/useHover
|
|
6
|
+
*Captured:* 2026-02-23T15:49:49.313Z
|
|
7
7
|
|
|
8
8
|
## useHover
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Browser & device hooks
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-02-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/useIncomingPostMessages
|
|
6
|
+
*Captured:* 2026-02-23T15:49:53.825Z
|
|
7
7
|
|
|
8
8
|
For handling postMessage events in React components.
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Lifecycle & execution hooks
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-02-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/useInterval
|
|
6
|
+
*Captured:* 2026-02-23T15:49:45.216Z
|
|
7
7
|
|
|
8
8
|
The useInterval hook allows for executing some code after a specified amount of time.
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-02-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/useIsFocusWithin
|
|
6
|
+
*Captured:* 2026-02-23T15:49:49.323Z
|
|
7
7
|
|
|
8
8
|
The useIsFocusWithin hook allows you to detect whether the focus is currently within a specific element or any of its children. This is useful for managing focus-based behavior like showing or hiding UI elements, styling active areas, or triggering accessibility behavior.
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-02-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/useKey
|
|
6
|
+
*Captured:* 2026-02-23T15:49:49.819Z
|
|
7
7
|
|
|
8
8
|
The useKey hook allows to easily detect key events. It can be used in two ways, either to specify a specific key to listen for or with a callback to listen for all keys.
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Browser & device hooks
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-02-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/useLocalStorage
|
|
6
|
+
*Captured:* 2026-02-23T15:49:55.693Z
|
|
7
7
|
|
|
8
8
|
The useLocalStorage and the useSessionStorage hook allows to save custom data in the respective storage locations.
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* UI state & input hooks
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-02-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/useLocationSuggestions
|
|
6
|
+
*Captured:* 2026-02-23T15:49:57.675Z
|
|
7
7
|
|
|
8
8
|
The useLocationSuggestions hook allows to use a side effect after the component has been mounted and rendered. The effect will not be triggered on mount and only when the dependencies change.
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Data aggregation hooks
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-02-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/useMax
|
|
6
|
+
*Captured:* 2026-02-23T15:50:00.898Z
|
|
7
7
|
|
|
8
8
|
Returns the largest valid numeric value found at the specified path within a list of objects. Supports localized formats and gracefully skips unparsable values.
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Data aggregation hooks
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-02-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/useMin
|
|
6
|
+
*Captured:* 2026-02-23T15:50:01.307Z
|
|
7
7
|
|
|
8
8
|
Returns the smallest valid numeric value found at the specified path within a list of objects. Handles localized number strings and safely ignores invalid values.
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-02-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/useMutationObserver
|
|
6
|
+
*Captured:* 2026-02-23T15:49:50.897Z
|
|
7
7
|
|
|
8
8
|
The useMutationObserver hook enables you to listen for changes on the given element or on its children. For more details, check out https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-02-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/useOnScreen
|
|
6
|
+
*Captured:* 2026-02-23T15:49:50.957Z
|
|
7
7
|
|
|
8
8
|
The useOnScreen hook tells you when an element is visible on screen.
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Browser & device hooks
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-02-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/useOnlineStatus
|
|
6
|
+
*Captured:* 2026-02-23T15:49:55.678Z
|
|
7
7
|
|
|
8
8
|
The useOnlineStatus hook tells you when there is a network connection or not.
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Browser & device hooks
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-02-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/usePostMessage
|
|
6
|
+
*Captured:* 2026-02-23T15:49:55.659Z
|
|
7
7
|
|
|
8
8
|
The usePostMessage hook allows to easily exchange events and data between the parent window and embedded iframes.
|
|
9
9
|
|
|
@@ -94,7 +94,7 @@ export default () => {
|
|
|
94
94
|
</div>
|
|
95
95
|
</div>
|
|
96
96
|
<div class="iframe-wrapper">
|
|
97
|
-
<iframe title="iframe" id="postMessageExample" src="/#postMessageExample" class="unstyled width-100pct" style="width: 1px; min-width: 100%; overflow: hidden; height:
|
|
97
|
+
<iframe title="iframe" id="postMessageExample" src="/#postMessageExample" class="unstyled width-100pct" style="width: 1px; min-width: 100%; overflow: hidden; height: 200px;" scrolling="no">
|
|
98
98
|
</iframe>
|
|
99
99
|
</div>
|
|
100
100
|
</div>
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Browser & device hooks
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-02-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/usePostMessageSender
|
|
6
|
+
*Captured:* 2026-02-23T15:49:55.659Z
|
|
7
7
|
|
|
8
8
|
Helper hook to fire postMessage events to other windows: a specific target (including yourself), the parent or top window, or every iframe on the page. It uses the wildcard target origin (*) and no-ops when a target window is missing, so it is safe to call even when an iframe or parent is not present.
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Lifecycle & execution hooks
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-02-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/usePrevious
|
|
6
|
+
*Captured:* 2026-02-23T15:49:45.948Z
|
|
7
7
|
|
|
8
8
|
The usePrevious hook allows to easily access state from previous component render. Instead of using a React.ref and a useEffect, this hook uses a useState internally to keep track of the previous state value.
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-02-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/useResizeObserver
|
|
6
|
+
*Captured:* 2026-02-23T15:49:51.975Z
|
|
7
7
|
|
|
8
8
|
The useResizeObserver hook allows to react on resize changes of a given element.
|
|
9
9
|
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
# useRioCookieConsent
|
|
2
|
+
|
|
3
|
+
*Category:* Utilities
|
|
4
|
+
*Section:* Browser & device hooks
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/useRioCookieConsent
|
|
6
|
+
*Captured:* 2026-02-23T15:49:53.778Z
|
|
7
|
+
|
|
8
|
+
The useRioCookieConsent hook reads and parses RIO's cookie_settings cookie and returns a typed consent state.
|
|
9
|
+
|
|
10
|
+
## useRioCookieConsent
|
|
11
|
+
|
|
12
|
+
### Example: Example 1
|
|
13
|
+
|
|
14
|
+
Check RIO cookie disclaimer status
|
|
15
|
+
|
|
16
|
+
#### Summary
|
|
17
|
+
|
|
18
|
+
Check RIO cookie disclaimer status
|
|
19
|
+
|
|
20
|
+
#### React (tsx)
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
import Button from '@rio-cloud/rio-uikit/Button';
|
|
24
|
+
import Notification from '@rio-cloud/rio-uikit/Notification';
|
|
25
|
+
import useRioCookieConsent from '@rio-cloud/rio-uikit/useRioCookieConsent';
|
|
26
|
+
|
|
27
|
+
export default () => {
|
|
28
|
+
const { getRioCookieConsentInfo } = useRioCookieConsent();
|
|
29
|
+
const isProd = import.meta.env.PROD;
|
|
30
|
+
|
|
31
|
+
const handleShowRioCookieConsent = () => {
|
|
32
|
+
const rioCookies = getRioCookieConsentInfo();
|
|
33
|
+
|
|
34
|
+
Notification.info(
|
|
35
|
+
<div>
|
|
36
|
+
{!isProd && (
|
|
37
|
+
<div className='text-color-danger text-medium margin-bottom-10'>THIS ONLY WORKS IN PROD!</div>
|
|
38
|
+
)}
|
|
39
|
+
<ul className='space-y-5'>
|
|
40
|
+
<li>
|
|
41
|
+
UX cookie accepted: <b>{rioCookies.uxCookiesAccepted ? 'Yes' : 'No'}</b>
|
|
42
|
+
</li>
|
|
43
|
+
<li>
|
|
44
|
+
Marketing cookie accepted: <b>{rioCookies.marketingCookiesAccepted ? 'Yes' : 'No'}</b>
|
|
45
|
+
</li>
|
|
46
|
+
<li>
|
|
47
|
+
Status: <b>{rioCookies.status}</b>
|
|
48
|
+
</li>
|
|
49
|
+
</ul>
|
|
50
|
+
</div>
|
|
51
|
+
);
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
return (
|
|
55
|
+
<div>
|
|
56
|
+
<Button onClick={handleShowRioCookieConsent}>Check RIO cookie disclaimer status</Button>
|
|
57
|
+
</div>
|
|
58
|
+
);
|
|
59
|
+
};
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
#### HTML (html)
|
|
63
|
+
|
|
64
|
+
```html
|
|
65
|
+
<div>
|
|
66
|
+
<button type="button" class="btn btn-default btn-component" tabindex="0">Check RIO cookie disclaimer status</button>
|
|
67
|
+
</div>
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
#### Props: Return value
|
|
71
|
+
|
|
72
|
+
### Return value
|
|
73
|
+
|
|
74
|
+
| Name | Type | Default | Description |
|
|
75
|
+
| --- | --- | --- | --- |
|
|
76
|
+
| getRioCookieConsentInfo | () => RioCookieConsentInfo | — | Reads and parses the RIO cookie consent settings. |
|
|
77
|
+
|
|
78
|
+
#### Props: RioCookieConsentInfo
|
|
79
|
+
|
|
80
|
+
### RioCookieConsentInfo
|
|
81
|
+
|
|
82
|
+
| Name | Type | Default | Description |
|
|
83
|
+
| --- | --- | --- | --- |
|
|
84
|
+
| cookieName | 'cookie_settings' | — | Name of the RIO consent cookie. |
|
|
85
|
+
| isSet | boolean | — | Indicates whether the consent cookie exists. |
|
|
86
|
+
| rawValue | string | — | Raw cookie value as read from document.cookie. |
|
|
87
|
+
| parsedValue | Record<string, number> | — | Parsed and normalized cookie switches when JSON parsing succeeds. |
|
|
88
|
+
| uxCookiesAccepted | boolean | — | True when UX cookies are accepted (switch-49 === 1). |
|
|
89
|
+
| marketingCookiesAccepted | boolean | — | True when marketing cookies are accepted (switch-2 === 1). |
|
|
90
|
+
| status | RioCookieConsentStatus | — | Computed consent status derived from parsed cookie values. |
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-02-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/useScrollPosition
|
|
6
|
+
*Captured:* 2026-02-23T15:49:52.042Z
|
|
7
7
|
|
|
8
8
|
The useScrollPosition hook allows to react on a desired scroll position of a given target. Use it when showing or hiding content based on the scroll position.
|
|
9
9
|
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* UI state & input hooks
|
|
5
|
-
*Source:* https://uikit.developers.rio.cloud
|
|
6
|
-
*Captured:* 2026-02-
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#/utilities/useSearch
|
|
6
|
+
*Captured:* 2026-02-23T15:49:58.326Z
|
|
7
7
|
|
|
8
8
|
The useSearch hook is a custom hook to filter a list of objects by a search value. Supports field-based filtering, custom filtering logic, debounce, and case sensitivity.
|
|
9
9
|
|