https://github.com/ryosogawa/react-ios-keyboard-viewport

A React hook that dynamically adjusts element positioning during iOS keyboard display, utilizing the Visual Viewport API for precise calculations.
https://github.com/ryosogawa/react-ios-keyboard-viewport

ios react react-hooks visual-viewport

Last synced: about 1 month ago
JSON representation

A React hook that dynamically adjusts element positioning during iOS keyboard display, utilizing the Visual Viewport API for precise calculations.

• Host: GitHub
• URL: https://github.com/ryosogawa/react-ios-keyboard-viewport
• Owner: RyoSogawa
• License: mit
• Created: 2023-10-13T13:15:53.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-04-21T02:05:43.000Z (about 2 months ago)
• Last Synced: 2025-04-24T05:45:48.790Z (about 1 month ago)
• Topics: ios, react, react-hooks, visual-viewport
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-ios-keyboard-viewport
• Size: 11.7 MB
• Stars: 9
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-ios-keyboard-viewport

[![npm version](https://badge.fury.io/js/react-ios-keyboard-viewport.svg)](http://badge.fury.io/js/react-ios-keyboard-viewport)

[![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)

[![minziggped size](https://badgen.net/bundlephobia/minzip/react-ios-keyboard-viewport)](https://bundlephobia.com/package/react-ios-keyboard-viewport)

[![dependencies count](https://badgen.net/bundlephobia/dependency-count/react-ios-keyboard-viewport)](https://bundlephobia.com/package/react-ios-keyboard-viewport)

[![tree shaking](https://badgen.net/bundlephobia/tree-shaking/react-ios-keyboard-viewport)](https://bundlephobia.com/package/react-ios-keyboard-viewport)

A React hook that dynamically adjusts element positioning during iOS keyboard display, utilizing the Visual Viewport API for precise calculations.

## Demo

| Default                                                                                                       | Fixed                                                                                                       |

|---------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------|

| 
![default](./docs/default.gif)
                                             | 
![fixed](./docs/fixed.gif)
                                               |

| [Storybook](https://react-ios-keyboard-viewport.vercel.app/iframe.html?args=&id=demo--default&viewMode=story) | [Storybook](https://react-ios-keyboard-viewport.vercel.app/iframe.html?args=&id=demo--fixed&viewMode=story) | 


## Features

- 📱 Overriding styles specifically when the iOS keyboard is displayed

- 🐥 Easy to use

- 🫙 Zero Dependencies

## Installation

Install from npm:

```

npm install react-ios-keyboard-viewport

```

## Usage

### useFixedStyleWithIOsKeyboard

This hook generates a style object for elements that you want to fix to the Top/Center/Bottom of the screen.  

The style object is only generated when the keyboard is displayed on iOS, so please use this style object to override after styling for the normal display state.

```tsx

import { useFixedStyleWithIOsKeyboard } from 'react-ios-keyboard-viewport';

const Component = () => {

  const { fixedTop, fixedCenter, fixedBottom } = useFixedStyleWithIOsKeyboard();

  return (

    


      

        Fixed to Top

      

      


        Fixed to Center

      

      

        Fixed to Bottom

      

    

  );

};

```


### useViewportDistanceFromPageTop 

This hook calculates the distance from the top of the page to the Top/Center/Bottom of the visualViewport.  

The calculated values are used in the styles of useFixedStyleWithIosKeyboard, but they can also be used to freely customize styles in cases where that hook is not suitable.

```tsx

import { useViewportDistanceFromPageTop } from 'react-ios-keyboard-viewport';

const { toTop, toCenter, toBottom } = useViewportDistanceFromPageTop();

```

### useIOsKeyboardHeight

This hook calculates the height of the virtual keyboard of iOS.   

It is used inside useFixedStyleWithIosKeyboard to determine whether the iOS keyboard is open.

```tsx

import { useiOsKeyboardHeight } from 'react-ios-keyboard-viewport';

const iOsKeyboardHeight = useiOsKeyboardHeight();

```

## Contribution

Feel free to open an issue or make a pull request.

## License

Distributed under the MIT License. See [LICENSE](./LICENSE) for more information.