Usage
import { useKeyboard } from 'node-fullykiosk';
function MyComponent() {
const { keyboardVisible, showKeyboard, hideKeyboard } = useKeyboard();
return (
<div>
<p>Keyboard is {keyboardVisible ? 'visible' : 'hidden'}</p>
<button onClick={showKeyboard}>Show Keyboard</button>
<button onClick={hideKeyboard}>Hide Keyboard</button>
</div>
);
}
Return Value
Returns an object with the following properties:
Current visibility state of the on-screen keyboard. Returns undefined if not running in Fully Kiosk Browser.
Function to show the on-screen keyboard programmatically.
Function to hide the on-screen keyboard programmatically.
Examples
Toggle Keyboard
import { useKeyboard } from 'node-fullykiosk';
function KeyboardToggle() {
const { keyboardVisible, showKeyboard, hideKeyboard } = useKeyboard();
const toggleKeyboard = () => {
if (keyboardVisible) {
hideKeyboard();
} else {
showKeyboard();
}
};
return (
<button onClick={toggleKeyboard}>
{keyboardVisible ? 'Hide' : 'Show'} Keyboard
</button>
);
}
Conditional Rendering
import { useKeyboard } from 'node-fullykiosk';
function KeyboardStatus() {
const { keyboardVisible, hideKeyboard } = useKeyboard();
if (keyboardVisible) {
return (
<div className="keyboard-alert">
<p>Keyboard is currently visible</p>
<button onClick={hideKeyboard}>Dismiss Keyboard</button>
</div>
);
}
return null;
}
Notes
- The hook automatically tracks keyboard visibility changes through Fully Kiosk Browser events
- When not running in Fully Kiosk Browser,
keyboardVisible returns undefined and the show/hide functions are no-ops
- The keyboard state updates automatically when the keyboard is shown or hidden through other means (e.g., user interaction with input fields)
