virtual-keyboard-offset
v1.0.10
Published
A react hook that calculates the distance that your components are offset and the size of the remaining viewport when iOS/Android mobile virtual keyboards open
Downloads
20
Maintainers
Readme
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);
}