useVirtualKeyboard

Hook that manages virtual keyboard state

browser

test coverage

Last changed: 2 hours ago

TIP

This hook uses VirtualKeyboard browser api to provide enhanced functionality. Make sure to check for compatibility with different browsers when using this api

WARNING

This hook has a fallback for virtual keyboard detection. If the virtual keyboard is not supported, the methods will not work.

Installation

Library

CLI

Manual

import { useVirtualKeyboard } from '@siberiacancode/reactuse';

Usage

const { opened, show, hide, supported, changeOverlaysContent } = useVirtualKeyboard();

Demo

source

Api

Parameters

Name	Type	Default	Note
initialValue?	boolean	false	The initial state value for keyboard visibility

Returns

UseVirtualKeyboardReturn

Type declaration

interface Navigator {
    virtualKeyboard?: {
      boundingRect: DOMRect;
      overlaysContent: boolean;
      show: () => void;
      hide: () => void;
      addEventListener: (type: 'geometrychange', listener: EventListener) => void;
      removeEventListener: (type: 'geometrychange', listener: EventListener) => void;
    };
  }

export interface UseVirtualKeyboardReturn {
  /** Whether the virtual keyboard is currently open */
  opened: boolean;
  /** Whether the VirtualKeyboard API is supported */
  supported: boolean;
  /** Change the overlays content */
  changeOverlaysContent: (overlaysContent: boolean) => void;
  /** Hide the virtual keyboard */
  hide: () => void;
  /** Show the virtual keyboard */
  show: () => void;
}

Source

Source • Demo

Contributors

D

debabin