A React Hook to Help Manage Mobile Browser Virtual Keyboards
virtual-keyboard-offset
A react hook to help manage mobile browser virtual keyboards
When the keyboard is open, the hook returns the remaining viewport size and the amount the page is offset.
We have all toiled our days away on gorgeous mobile web designs just to have them accordioned by unpredictable virtual keyboards. With no reliable API to determine virtual keyboard specs or even wether or not it is open, creating responsive mobile browser designs has been unnecessarily difficult.
This project aims to create a simple, lightweight React hook that determines when the virtual keyboard is open, how much it has offset our pages components and the size of the remaining viewport.
Install
npm install virtual-keyboard-offset
yarn add virtual-keyboard-offset
Example
import React from 'react';
import { useKeyboardOffset } from 'virtual-keyboard-offset';
function MyScreen() {
const { keyBoardOffset, windowHeight } = useKeyboardOffset();
console.log(keyBoardOffset, windowHeight);
}