@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Utilities/utilities/usefullscreen.json

@@ -0,0 +1,197 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:39.887Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useFullscreen",
+    "category": "Utilities",
+    "section": "DOM behavior hooks",
+    "slug": "utilities/usefullscreen",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "64783ec47b39927460a660a5afe85f7ed26a9219aeb6c884ff435f13c83c3055"
+  },
+  "title": "useFullscreen",
+  "lead": "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.",
+  "content": [
+    {
+      "heading": "useFullscreen",
+      "body": "Fullscreen on dedicated element",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div>Fullscreen enabled: <span>false</span></div><hr><div>Is Fullscreen active: <span>false</span></div><hr><div class=\"btn-toolbar\"><div class=\"btn btn-default\">Request Fullscreen</div><div class=\"btn btn-default\">Exit Fullscreen</div><div class=\"btn btn-default\">Toggle Fullscreen</div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import useFullscreen from '@rio-cloud/rio-uikit/useFullscreen';\n\nexport default () => {\n    const handleChange = (event: Event) => console.log(event);\n    const handleError = (event: Event) => console.log(event);\n\n    const { exitFullscreen, isEnabled, isFullscreen, requestFullscreen, toggleFullscreen } = useFullscreen({\n        onChange: handleChange,\n        onError: handleError,\n    });\n\n    return (\n        <div>\n            <div>\n                Fullscreen enabled: <span>{`${isEnabled}`}</span>\n            </div>\n            <hr />\n            <div>\n                Is Fullscreen active: <span>{`${isFullscreen}`}</span>\n            </div>\n            <hr />\n            <div className='btn-toolbar'>\n                <div className='btn btn-default' onClick={requestFullscreen}>\n                    Request Fullscreen\n                </div>\n                <div className='btn btn-default' onClick={exitFullscreen}>\n                    Exit Fullscreen\n                </div>\n                <div className='btn btn-default' onClick={toggleFullscreen}>\n                    Toggle Fullscreen\n                </div>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div>Fullscreen enabled: <span>false</span>\n    </div>\n    <hr>\n    <div>Is Fullscreen active: <span>false</span>\n    </div>\n    <hr>\n    <div class=\"btn-toolbar\">\n        <div class=\"btn btn-default\">Request Fullscreen</div>\n        <div class=\"btn btn-default\">Exit Fullscreen</div>\n        <div class=\"btn btn-default\">Toggle Fullscreen</div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "element",
+                      "type": "HTMLElement",
+                      "default": "",
+                      "description": "The target element other than document. Note, the element need to be existing in the DOM when initializing the hook. Otherwise pass the element as argument to the \"requestFullscreen\" function."
+                    },
+                    {
+                      "name": "onChange",
+                      "type": "(callback: OnChangeEventCallback) => void",
+                      "default": "() => {}",
+                      "description": "Custom callback function for acting on the fullscreen change."
+                    },
+                    {
+                      "name": "onError",
+                      "type": "(callback: EventCallback) => void",
+                      "default": "() => {}",
+                      "description": "Custom callback function for acting on an error when the fullscreen fails."
+                    },
+                    {
+                      "name": "requestFullscreenOptions",
+                      "type": "{ navigationUI?: string | \"auto\" | \"hide\" | \"show\" }",
+                      "default": "{}",
+                      "description": "Define additional options for requesting the fullscreen."
+                    }
+                  ]
+                },
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "requestFullscreen",
+                      "type": "(targetElement: HTMLElement) => void",
+                      "default": "",
+                      "description": "This function requests the fullscreen to the browser. It takes an optional argument to define the target element later than on init."
+                    },
+                    {
+                      "name": "exitFullscreen",
+                      "type": "Function",
+                      "default": "",
+                      "description": "This function exits the fullscreen."
+                    },
+                    {
+                      "name": "toggleFullscreen",
+                      "type": "Function",
+                      "default": "",
+                      "description": "This function requests or exists the fullscreen depending on the fullscreen state."
+                    },
+                    {
+                      "name": "isFullscreen",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "Defines whether the browser is in fullscreen mode. Note, the can only be on element in fullscreen at a time, either the document or a dedicated element."
+                    },
+                    {
+                      "name": "isEnabled",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "Tells you if the browser allows the fullscreen mode."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"example-wrapper bg-lighter display-grid\"><div class=\"panel panel-default shadow-default \"><div class=\"panel-heading display-flex justify-content-between align-items-center\"><div class=\"text-medium text-color-darker\">Example - click on expand icon to use fullscreen</div><div class=\"text-color-gray text-size-16 cursor-pointer\"><span class=\"rioglyph rioglyph-fullscreen\"></span></div></div><div class=\"panel-body\"><p>Sample content. <br>Here you can have arbitrary content like a map or charts etc.</p></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useRef } from 'react';\n\nimport useFullscreen from '@rio-cloud/rio-uikit/useFullscreen';\n\nimport { dummyTextLong } from '../../../utils/data';\n\nexport default () => {\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const { toggleFullscreen, isFullscreen } = useFullscreen();\n\n    return (\n        <div className='example-wrapper bg-lighter display-grid' ref={wrapperRef}>\n            <div className={`panel panel-default shadow-default ${isFullscreen ? 'margin-25' : ''}`}>\n                <div className='panel-heading display-flex justify-content-between align-items-center'>\n                    <div className='text-medium text-color-darker'>\n                        Example - click on expand icon to use fullscreen\n                    </div>\n                    <div\n                        className='text-color-gray text-size-16 cursor-pointer'\n                        onClick={() => toggleFullscreen(wrapperRef.current)}\n                    >\n                        <span className='rioglyph rioglyph-fullscreen' />\n                    </div>\n                </div>\n                <div className='panel-body'>\n                    <p>\n                        Sample content. <br />\n                        Here you can have arbitrary content like a map or charts etc.\n                    </p>\n                    {isFullscreen && <p>{dummyTextLong}</p>}\n                </div>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"example-wrapper bg-lighter display-grid\">\n    <div class=\"panel panel-default shadow-default \">\n        <div class=\"panel-heading display-flex justify-content-between align-items-center\">\n            <div class=\"text-medium text-color-darker\">Example - click on expand icon to use fullscreen</div>\n            <div class=\"text-color-gray text-size-16 cursor-pointer\">\n                <span class=\"rioglyph rioglyph-fullscreen\">\n                </span>\n            </div>\n        </div>\n        <div class=\"panel-body\">\n            <p>Sample content. <br>Here you can have arbitrary content like a map or charts etc.</p>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "element",
+                      "type": "HTMLElement",
+                      "default": "",
+                      "description": "The target element other than document. Note, the element need to be existing in the DOM when initializing the hook. Otherwise pass the element as argument to the \"requestFullscreen\" function."
+                    },
+                    {
+                      "name": "onChange",
+                      "type": "(callback: OnChangeEventCallback) => void",
+                      "default": "() => {}",
+                      "description": "Custom callback function for acting on the fullscreen change."
+                    },
+                    {
+                      "name": "onError",
+                      "type": "(callback: EventCallback) => void",
+                      "default": "() => {}",
+                      "description": "Custom callback function for acting on an error when the fullscreen fails."
+                    },
+                    {
+                      "name": "requestFullscreenOptions",
+                      "type": "{ navigationUI?: string | \"auto\" | \"hide\" | \"show\" }",
+                      "default": "{}",
+                      "description": "Define additional options for requesting the fullscreen."
+                    }
+                  ]
+                },
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "requestFullscreen",
+                      "type": "(targetElement: HTMLElement) => void",
+                      "default": "",
+                      "description": "This function requests the fullscreen to the browser. It takes an optional argument to define the target element later than on init."
+                    },
+                    {
+                      "name": "exitFullscreen",
+                      "type": "Function",
+                      "default": "",
+                      "description": "This function exits the fullscreen."
+                    },
+                    {
+                      "name": "toggleFullscreen",
+                      "type": "Function",
+                      "default": "",
+                      "description": "This function requests or exists the fullscreen depending on the fullscreen state."
+                    },
+                    {
+                      "name": "isFullscreen",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "Defines whether the browser is in fullscreen mode. Note, the can only be on element in fullscreen at a time, either the document or a dedicated element."
+                    },
+                    {
+                      "name": "isEnabled",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "Tells you if the browser allows the fullscreen mode."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Utilities/utilities/usehover.json

@@ -0,0 +1,57 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:40.037Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useHover",
+    "category": "Utilities",
+    "section": "DOM behavior hooks",
+    "slug": "utilities/usehover",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "9d375b6fdd4c772a8567db29c8f715734c239b88e9170b7ffc78158830755546"
+  },
+  "title": "useHover",
+  "lead": null,
+  "content": [
+    {
+      "heading": "useHover",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"well display-flex gap-10 align-items-center border hover-border-color-primary max-width-300 cursor-pointer\"><span class=\"text-color-darker text-size-16 text-medium\">Lorem ipsum dolor sit amet</span></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "/* eslint-disable max-len */\nimport { useRef } from 'react';\n\nimport useHover from '@rio-cloud/rio-uikit/useHover';\n\nexport default () => {\n    const ref = useRef<HTMLInputElement>(null);\n\n    const isHover = useHover(ref);\n\n    return (\n        <div\n            ref={ref}\n            className='well display-flex gap-10 align-items-center border hover-border-color-primary max-width-300 cursor-pointer'\n        >\n            <span className='text-color-darker text-size-16 text-medium'>Lorem ipsum dolor sit amet</span>\n            {isHover && <span className='rioglyph rioglyph-antenna text-size-20 text-color-primary' />}\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"well display-flex gap-10 align-items-center border hover-border-color-primary max-width-300 cursor-pointer\">\n    <span class=\"text-color-darker text-size-16 text-medium\">Lorem ipsum dolor sit amet</span>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "ref",
+                      "type": "React.Ref",
+                      "default": "",
+                      "description": "The reference to the element that shall be hovered."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Utilities/utilities/useinterval.json

@@ -0,0 +1,63 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:36.368Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useInterval",
+    "category": "Utilities",
+    "section": "Lifecycle & execution hooks",
+    "slug": "utilities/useinterval",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "79bcf41fedf57d336eef48b7e79da24ae687c47633ac56e152281257acca9c73"
+  },
+  "title": "useInterval",
+  "lead": "The useInterval hook allows for executing some code after a specified amount of time.",
+  "content": [
+    {
+      "heading": "useInterval",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex flex-column justify-content-center align-items-center\"><div class=\"display-flex flex-column justify-content-center align-items-center margin-bottom-20\"><label>Count:</label><div class=\"h2 margin-0\">0</div></div><div class=\"form-group display-flex gap-10\"><input class=\"form-control\" value=\"1000\"><button class=\"btn btn-default\" type=\"button\">Stop</button></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport useInterval from '@rio-cloud/rio-uikit/useInterval';\n\nexport default () => {\n    const [count, setCount] = useState(0);\n    const [delay, setDelay] = useState(1000);\n    const [isRunning, setIsRunning] = useState(true);\n\n    useInterval(\n        () => {\n            // Your custom logic here\n            setCount(count + 1);\n        },\n        isRunning ? delay : null\n    );\n\n    return (\n        <div className='display-flex flex-column justify-content-center align-items-center'>\n            <div className='display-flex flex-column justify-content-center align-items-center margin-bottom-20'>\n                <label>Count:</label>\n                <div className='h2 margin-0'>{count}</div>\n            </div>\n            <div className='form-group display-flex gap-10'>\n                <input\n                    className='form-control'\n                    value={delay}\n                    onChange={event => setDelay(Number(event.target.value))}\n                />\n                <button className='btn btn-default' type='button' onClick={() => setIsRunning(!isRunning)}>\n                    {isRunning ? 'Stop' : 'Start'}\n                </button>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex flex-column justify-content-center align-items-center\">\n    <div class=\"display-flex flex-column justify-content-center align-items-center margin-bottom-20\">\n        <label>Count:</label>\n        <div class=\"h2 margin-0\">0</div>\n    </div>\n    <div class=\"form-group display-flex gap-10\">\n        <input class=\"form-control\" value=\"1000\">\n        <button class=\"btn btn-default\" type=\"button\">Stop</button>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "callback",
+                      "type": "Function",
+                      "default": "",
+                      "description": "The callback function to be triggered."
+                    },
+                    {
+                      "name": "delay",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The time to wait until the callback function gets invoked."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Utilities/utilities/useisfocuswithin.json

@@ -0,0 +1,75 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:40.454Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useIsFocusWithin",
+    "category": "Utilities",
+    "section": "DOM behavior hooks",
+    "slug": "utilities/useisfocuswithin",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "6a1148ba89e85613f7345728d0020dcc5cac2dfb25b2126267b809e8455255b5"
+  },
+  "title": "useIsFocusWithin",
+  "lead": "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.",
+  "content": [
+    {
+      "heading": "useIsFocusWithin",
+      "body": "It provides a boolean flag isFocusedWithin and a ref you can attach to any container. Optionally, you can provide callbacks for when focus enters or leaves the container, and configure a delay for blur detection.",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"max-width-400 padding-20 border border-color-lighter rounded bg-lightest\"><div class=\"text-medium text-size-16 text-color-darker margin-bottom-15\">Click inside or outside</div><div><label for=\"simpleInput1\" class=\"display-inline-block\"><span>Simple input 1</span></label><div class=\"ClearableInput input-group\"><input id=\"simpleInput1\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div><div><label for=\"simpleInput2\" class=\"display-inline-block\"><span>Simple input 2</span></label><div class=\"ClearableInput input-group\"><input id=\"simpleInput2\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div></div><div class=\"margin-top-15 text-size-16 text-italic text-color-darker\">Focus is outside the block</div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import ClearableInput from '@rio-cloud/rio-uikit/ClearableInput';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\nimport useIsFocusWithin from '@rio-cloud/rio-uikit/useIsFocusWithin';\n\nexport default () => {\n    const { ref, isFocusedWithin } = useIsFocusWithin<HTMLDivElement>({\n        onFocusWithin: () => console.log('Entered component'),\n        onBlurWithin: () => console.log('Left component'),\n        delay: 100, // optional\n    });\n\n    return (\n        <div>\n            <div\n                ref={ref}\n                className={`max-width-400 padding-20 border ${isFocusedWithin ? 'border-color-primary' : 'border-color-lighter'} rounded bg-lightest`}\n            >\n                <div className='text-medium text-size-16 text-color-darker margin-bottom-15'>\n                    Click inside or outside\n                </div>\n                <div>\n                    <FormLabel htmlFor='simpleInput1'>Simple input 1</FormLabel>\n                    <ClearableInput id='simpleInput1' />\n                </div>\n                <div>\n                    <FormLabel htmlFor='simpleInput2'>Simple input 2</FormLabel>\n                    <ClearableInput id='simpleInput2' />\n                </div>\n            </div>\n            <div className='margin-top-15 text-size-16 text-italic text-color-darker'>\n                {isFocusedWithin ? 'Focus is within the block' : 'Focus is outside the block'}\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"max-width-400 padding-20 border border-color-lighter rounded bg-lightest\">\n        <div class=\"text-medium text-size-16 text-color-darker margin-bottom-15\">Click inside or outside</div>\n        <div>\n            <label for=\"simpleInput1\" class=\"display-inline-block\">\n                <span>Simple input 1</span>\n            </label>\n            <div class=\"ClearableInput input-group\">\n                <input id=\"simpleInput1\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\">\n                <span class=\"clearButton hide\">\n                    <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                    </span>\n                </span>\n            </div>\n        </div>\n        <div>\n            <label for=\"simpleInput2\" class=\"display-inline-block\">\n                <span>Simple input 2</span>\n            </label>\n            <div class=\"ClearableInput input-group\">\n                <input id=\"simpleInput2\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\">\n                <span class=\"clearButton hide\">\n                    <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                    </span>\n                </span>\n            </div>\n        </div>\n    </div>\n    <div class=\"margin-top-15 text-size-16 text-italic text-color-darker\">Focus is outside the block</div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "ref",
+                      "type": "React.RefObject<HTMLElement>",
+                      "default": "",
+                      "description": "Optional ref to an existing DOM element. If not provided, the hook will return its own ref."
+                    },
+                    {
+                      "name": "onFocusWithin",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback triggered when focus enters the target element or any of its children."
+                    },
+                    {
+                      "name": "onBlurWithin",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback triggered when focus leaves the target element and all of its children."
+                    },
+                    {
+                      "name": "delay",
+                      "type": "number",
+                      "default": "",
+                      "description": "Optional delay in milliseconds before calling onBlurWithin. Useful when focus quickly shifts inside the container."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Utilities/utilities/usekey.json

@@ -0,0 +1,75 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:40.454Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useKey",
+    "category": "Utilities",
+    "section": "DOM behavior hooks",
+    "slug": "utilities/usekey",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "6aaba83c62a943b75f8b7e16a89b610580479350fd3d0102cc88197a1e750220"
+  },
+  "title": "useKey",
+  "lead": "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.",
+  "content": [
+    {
+      "heading": "useKey",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex flex-column justify-content-center align-items-center\"><div class=\"display-flex justify-content-center align-items-center height-50\"><div class=\"margin-right-10\">Key</div><div class=\"label label-default\"> </div><div class=\"margin-left-10\">pressed</div></div><div class=\"display-flex justify-content-center align-items-center height-50\"><div class=\"margin-right-10\">Key</div><div class=\"label label-default\"> </div><div class=\"margin-left-10\">pressed</div></div><div class=\"display-flex justify-content-center align-items-center height-50\"><div class=\"margin-right-10\">Key</div><div class=\"label label-default\"> </div><div class=\"margin-left-10\">pressed</div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React, { useState } from 'react';\n\nimport useKey from '@rio-cloud/rio-uikit/useKey';\n\nconst Usage1 = () => {\n    const [pressedKey, setPressedKey] = useState(' ');\n\n    // Use the useKey hook to listen for any key presses\n    useKey(event => {\n        console.log(event);\n        event.key === ' ' ? setPressedKey(event.code) : setPressedKey(event.key);\n    });\n\n    return (\n        <div className='display-flex justify-content-center align-items-center height-50'>\n            <div className='margin-right-10'>Key</div>\n            <div className='label label-default'>{pressedKey}</div>\n            <div className='margin-left-10'>pressed</div>\n        </div>\n    );\n};\n\nconst Usage2 = () => {\n    const [pressedKey, setPressedKey] = useState(' ');\n\n    // Use the useKey hook to listen for any key presses with optional event types\n    useKey(\n        event => {\n            if (event.shiftKey) {\n                setPressedKey(`Shift + ${event.key}`);\n            } else if (event.metaKey) {\n                setPressedKey(`Cmd + ${event.key}`);\n            } else if (event.key === ' ') {\n                setPressedKey(event.code);\n            } else {\n                setPressedKey(event.key);\n            }\n        },\n        ['keyup'] // Listens for the 'keyup' event\n    );\n\n    return (\n        <div className='display-flex justify-content-center align-items-center height-50'>\n            <div className='margin-right-10'>Key</div>\n            <div className='label label-default'>{pressedKey}</div>\n            <div className='margin-left-10'>pressed</div>\n        </div>\n    );\n};\n\nconst Usage3 = () => {\n    const [pressedKey, setPressedKey] = useState(' ');\n\n    // Use the useKey hook to listen for the Enter key press\n    useKey('Enter', event => {\n        console.log('Enter key pressed');\n        setPressedKey('Enter');\n    });\n\n    return (\n        <div className='display-flex justify-content-center align-items-center height-50'>\n            <div className='margin-right-10'>Key</div>\n            <div className='label label-default'>{pressedKey}</div>\n            <div className='margin-left-10'>pressed</div>\n        </div>\n    );\n};\n\nexport default () => {\n    return (\n        <div className='display-flex flex-column justify-content-center align-items-center'>\n            <Usage1 />\n            <Usage2 />\n            <Usage3 />\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex flex-column justify-content-center align-items-center\">\n    <div class=\"display-flex justify-content-center align-items-center height-50\">\n        <div class=\"margin-right-10\">Key</div>\n        <div class=\"label label-default\"> </div>\n        <div class=\"margin-left-10\">pressed</div>\n    </div>\n    <div class=\"display-flex justify-content-center align-items-center height-50\">\n        <div class=\"margin-right-10\">Key</div>\n        <div class=\"label label-default\"> </div>\n        <div class=\"margin-left-10\">pressed</div>\n    </div>\n    <div class=\"display-flex justify-content-center align-items-center height-50\">\n        <div class=\"margin-right-10\">Key</div>\n        <div class=\"label label-default\"> </div>\n        <div class=\"margin-left-10\">pressed</div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "keyOrCallback",
+                      "type": "string | ((event: KeyboardEvent) => void)",
+                      "default": "",
+                      "description": "Either a key string (e.g., \"Enter\") or a callback function"
+                    },
+                    {
+                      "name": "callbackOrEventTypes",
+                      "type": "(event: KeyboardEvent) => void | KeyboardEventType[]",
+                      "default": "",
+                      "description": "If the first argument is a key, this should be the callback function. If the first argument is a callback, this is an optional array of event types."
+                    },
+                    {
+                      "name": "eventTypesOrNode",
+                      "type": "KeyboardEventType[] | Document",
+                      "default": "[keydown]",
+                      "description": "If the first argument is a key, this should be an array of event types. If the first argument is a callback, this is the node (defaults to document)."
+                    },
+                    {
+                      "name": "node",
+                      "type": "Node",
+                      "default": "document",
+                      "description": "Optional DOM node to attach the event listener to (defaults to document)."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Utilities/utilities/uselocalstorage.json

@@ -0,0 +1,69 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:43.953Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useLocalStorage",
+    "category": "Utilities",
+    "section": "Browser & device hooks",
+    "slug": "utilities/uselocalstorage",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "c494bf9e7495b9d01601349106a5ddb5487ad590086dfd74649434bc37385643"
+  },
+  "title": "useLocalStorage / useSessionStorage",
+  "lead": "The useLocalStorage and the useSessionStorage hook allows to save custom data in the respective storage locations.",
+  "content": [
+    {
+      "heading": "useLocalStorage / useSessionStorage",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"margin-bottom-15\"><div>Tom - 26</div><div>{\n \"enableBuyOption\": true\n}</div></div><div class=\"btn-toolbar\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Set Name</button><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Set Age</button><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Remove Name</button><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Remove Age</button><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Toggle Settings</button></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Button from '@rio-cloud/rio-uikit/Button';\nimport useLocalStorage from '@rio-cloud/rio-uikit/useLocalStorage';\nimport useSessionStorage from '@rio-cloud/rio-uikit/useSessionStorage';\n\nexport default () => {\n    const [name, setName, removeName] = useSessionStorage('name', 'Tom');\n\n    const [age, setAge, removeAge] = useLocalStorage('age', 26);\n    const [settings, setSettings] = useLocalStorage('uikit.demo.settings', { enableBuyOption: true });\n\n    return (\n        <div>\n            <div className='margin-bottom-15'>\n                <div>\n                    {name} - {age}\n                </div>\n                <div>{JSON.stringify(settings, null, 1)}</div>\n            </div>\n            <div className='btn-toolbar'>\n                <Button onClick={() => setName('John')}>Set Name</Button>\n                <Button onClick={() => setAge(40)}>Set Age</Button>\n                <Button onClick={removeName}>Remove Name</Button>\n                <Button onClick={removeAge}>Remove Age</Button>\n                <Button onClick={() => setSettings({ ...settings, enableBuyOption: !settings?.enableBuyOption })}>\n                    Toggle Settings\n                </Button>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"margin-bottom-15\">\n        <div>Tom - 26</div>\n        <div>{\n            \"enableBuyOption\": true\n            }</div>\n    </div>\n    <div class=\"btn-toolbar\">\n        <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Set Name</button>\n        <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Set Age</button>\n        <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Remove Name</button>\n        <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Remove Age</button>\n        <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Toggle Settings</button>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "key",
+                      "type": "string",
+                      "default": "",
+                      "description": "The key used for storing and retrieving values from the storage."
+                    },
+                    {
+                      "name": "defaultValue",
+                      "type": "any",
+                      "default": "",
+                      "description": "The initial default value to be stored. If passed a function, it gets executed."
+                    },
+                    {
+                      "name": "[value, setValue, removeValue]",
+                      "type": "[any, Function, Function]",
+                      "default": "",
+                      "description": "Returns the stored value and two functions for setting and removing the value from the storage."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}