react-ios-keyboard-viewport - npm Package Compare versions

Comparing version 0.0.1 to 0.1.0

./lib/index.js

@@ -1,1 +0,1 @@
-var t=require("react"),e=function(){return/iPhone|iPod/.test(navigator.userAgent)},o=function(){var o=t.useState(0),i=o[0],r=o[1];return t.useEffect(function(){if(e()){var t=function(){if(visualViewport){var t=visualViewport.height<window.innerHeight?window.innerHeight-visualViewport.height:0;r(t)}};return visualViewport&&visualViewport.addEventListener("resize",t),function(){visualViewport&&visualViewport.removeEventListener("resize",t)}}},[]),i},i=function(){var o=t.useState({toTop:0,toCenter:0,toBottom:0}),i=o[0],r=o[1];return t.useEffect(function(){if(e()){var t=function(){var t,e=window.scrollY,o=window.scrollY+((null==(t=visualViewport)?void 0:t.height)||0);r({toTop:e,toCenter:e+(o-e)/2,toBottom:o})};return visualViewport&&visualViewport.addEventListener("resize",t),window.addEventListener("scroll",t),function(){visualViewport&&visualViewport.removeEventListener("resize",t),window.removeEventListener("scroll",t)}}},[]),i};exports.useFixedStyleWithIOsKeyboard=function(){var t=i(),e=t.toTop,r=t.toCenter,n=t.toBottom;return o()>0?{fixedTop:{position:"absolute",top:0,transform:"translateY("+e+"px)"},fixedCenter:{position:"absolute",top:0,bottom:"auto",transform:"translateY(calc(-50% + "+r+"px))"},fixedBottom:{position:"absolute",top:0,bottom:"auto",transform:"translateY(calc(-100% + "+n+"px))"}}:{fixedTop:{},fixedCenter:{},fixedBottom:{}}},exports.useIOsKeyboardHeight=o,exports.useViewportDistanceFromPageTop=i;
+var t=require("react"),e=function(){return/iPhone|iPod/.test(navigator.userAgent)},o=function(){var o=t.useState(0),i=o[0],r=o[1];return t.useEffect(function(){if(e()){var t=function(){if(visualViewport){var t=visualViewport.height<window.innerHeight?window.innerHeight-visualViewport.height:0;r(t)}};return visualViewport&&visualViewport.addEventListener("resize",t),function(){visualViewport&&visualViewport.removeEventListener("resize",t)}}},[]),i},i=function(o){var i=(void 0===o?{target:void 0}:o).target,r=t.useState({toTop:0,toCenter:0,toBottom:0}),n=r[0],s=r[1];return t.useEffect(function(){if(e()){var t=function(){var t,e=i?i instanceof HTMLElement||i instanceof Element?i.scrollTop:i instanceof Document?i.documentElement.scrollTop:window.scrollY:window.scrollY,o=e+((null==(t=visualViewport)?void 0:t.height)||0);s({toTop:e,toCenter:e+(o-e)/2,toBottom:o})};visualViewport&&visualViewport.addEventListener("resize",t);var o=i||window;return o.addEventListener("scroll",t),function(){visualViewport&&visualViewport.removeEventListener("resize",t),o.removeEventListener("scroll",t)}}},[i]),n};exports.useFixedStyleWithIOsKeyboard=function(t){var e=i({target:(void 0===t?{target:void 0}:t).target}),r=e.toTop,n=e.toCenter,s=e.toBottom;return o()>0?{fixedTop:{position:"absolute",top:0,transform:"translateY("+r+"px)"},fixedCenter:{position:"absolute",top:0,bottom:"auto",transform:"translateY(calc(-50% + "+n+"px))"},fixedBottom:{position:"absolute",top:0,bottom:"auto",transform:"translateY(calc(-100% + "+s+"px))"}}:{fixedTop:{},fixedCenter:{},fixedBottom:{}}},exports.useIOsKeyboardHeight=o,exports.useViewportDistanceFromPageTop=i;

lib/index.js

@@ -1,1 +0,1 @@
-var t=require("react"),e=function(){return/iPhone|iPod/.test(navigator.userAgent)},o=function(){var o=t.useState(0),i=o[0],r=o[1];return t.useEffect(function(){if(e()){var t=function(){if(visualViewport){var t=visualViewport.height<window.innerHeight?window.innerHeight-visualViewport.height:0;r(t)}};return visualViewport&&visualViewport.addEventListener("resize",t),function(){visualViewport&&visualViewport.removeEventListener("resize",t)}}},[]),i},i=function(){var o=t.useState({toTop:0,toCenter:0,toBottom:0}),i=o[0],r=o[1];return t.useEffect(function(){if(e()){var t=function(){var t,e=window.scrollY,o=window.scrollY+((null==(t=visualViewport)?void 0:t.height)||0);r({toTop:e,toCenter:e+(o-e)/2,toBottom:o})};return visualViewport&&visualViewport.addEventListener("resize",t),window.addEventListener("scroll",t),function(){visualViewport&&visualViewport.removeEventListener("resize",t),window.removeEventListener("scroll",t)}}},[]),i};exports.useFixedStyleWithIOsKeyboard=function(){var t=i(),e=t.toTop,r=t.toCenter,n=t.toBottom;return o()>0?{fixedTop:{position:"absolute",top:0,transform:"translateY("+e+"px)"},fixedCenter:{position:"absolute",top:0,bottom:"auto",transform:"translateY(calc(-50% + "+r+"px))"},fixedBottom:{position:"absolute",top:0,bottom:"auto",transform:"translateY(calc(-100% + "+n+"px))"}}:{fixedTop:{},fixedCenter:{},fixedBottom:{}}},exports.useIOsKeyboardHeight=o,exports.useViewportDistanceFromPageTop=i;
+var t=require("react"),e=function(){return/iPhone|iPod/.test(navigator.userAgent)},o=function(){var o=t.useState(0),i=o[0],r=o[1];return t.useEffect(function(){if(e()){var t=function(){if(visualViewport){var t=visualViewport.height<window.innerHeight?window.innerHeight-visualViewport.height:0;r(t)}};return visualViewport&&visualViewport.addEventListener("resize",t),function(){visualViewport&&visualViewport.removeEventListener("resize",t)}}},[]),i},i=function(o){var i=(void 0===o?{target:void 0}:o).target,r=t.useState({toTop:0,toCenter:0,toBottom:0}),n=r[0],s=r[1];return t.useEffect(function(){if(e()){var t=function(){var t,e=i?i instanceof HTMLElement||i instanceof Element?i.scrollTop:i instanceof Document?i.documentElement.scrollTop:window.scrollY:window.scrollY,o=e+((null==(t=visualViewport)?void 0:t.height)||0);s({toTop:e,toCenter:e+(o-e)/2,toBottom:o})};visualViewport&&visualViewport.addEventListener("resize",t);var o=i||window;return o.addEventListener("scroll",t),function(){visualViewport&&visualViewport.removeEventListener("resize",t),o.removeEventListener("scroll",t)}}},[i]),n};exports.useFixedStyleWithIOsKeyboard=function(t){var e=i({target:(void 0===t?{target:void 0}:t).target}),r=e.toTop,n=e.toCenter,s=e.toBottom;return o()>0?{fixedTop:{position:"absolute",top:0,transform:"translateY("+r+"px)"},fixedCenter:{position:"absolute",top:0,bottom:"auto",transform:"translateY(calc(-50% + "+n+"px))"},fixedBottom:{position:"absolute",top:0,bottom:"auto",transform:"translateY(calc(-100% + "+s+"px))"}}:{fixedTop:{},fixedCenter:{},fixedBottom:{}}},exports.useIOsKeyboardHeight=o,exports.useViewportDistanceFromPageTop=i;

lib/index.module.js

@@ -1,1 +0,1 @@
-import{useState as t,useEffect as o}from"react";var e=function(){return/iPhone|iPod/.test(navigator.userAgent)},i=function(){var i=t(0),r=i[0],n=i[1];return o(function(){if(e()){var t=function(){if(visualViewport){var t=visualViewport.height<window.innerHeight?window.innerHeight-visualViewport.height:0;n(t)}};return visualViewport&&visualViewport.addEventListener("resize",t),function(){visualViewport&&visualViewport.removeEventListener("resize",t)}}},[]),r},r=function(){var i=t({toTop:0,toCenter:0,toBottom:0}),r=i[0],n=i[1];return o(function(){if(e()){var t=function(){var t,o=window.scrollY,e=window.scrollY+((null==(t=visualViewport)?void 0:t.height)||0);n({toTop:o,toCenter:o+(e-o)/2,toBottom:e})};return visualViewport&&visualViewport.addEventListener("resize",t),window.addEventListener("scroll",t),function(){visualViewport&&visualViewport.removeEventListener("resize",t),window.removeEventListener("scroll",t)}}},[]),r},n=function(){var t=r(),o=t.toTop,e=t.toCenter,n=t.toBottom;return i()>0?{fixedTop:{position:"absolute",top:0,transform:"translateY("+o+"px)"},fixedCenter:{position:"absolute",top:0,bottom:"auto",transform:"translateY(calc(-50% + "+e+"px))"},fixedBottom:{position:"absolute",top:0,bottom:"auto",transform:"translateY(calc(-100% + "+n+"px))"}}:{fixedTop:{},fixedCenter:{},fixedBottom:{}}};export{n as useFixedStyleWithIOsKeyboard,i as useIOsKeyboardHeight,r as useViewportDistanceFromPageTop};
+import{useState as t,useEffect as e}from"react";var o=function(){return/iPhone|iPod/.test(navigator.userAgent)},i=function(){var i=t(0),r=i[0],n=i[1];return e(function(){if(o()){var t=function(){if(visualViewport){var t=visualViewport.height<window.innerHeight?window.innerHeight-visualViewport.height:0;n(t)}};return visualViewport&&visualViewport.addEventListener("resize",t),function(){visualViewport&&visualViewport.removeEventListener("resize",t)}}},[]),r},r=function(i){var r=(void 0===i?{target:void 0}:i).target,n=t({toTop:0,toCenter:0,toBottom:0}),a=n[0],s=n[1];return e(function(){if(o()){var t=function(){var t,e=r?r instanceof HTMLElement||r instanceof Element?r.scrollTop:r instanceof Document?r.documentElement.scrollTop:window.scrollY:window.scrollY,o=e+((null==(t=visualViewport)?void 0:t.height)||0);s({toTop:e,toCenter:e+(o-e)/2,toBottom:o})};visualViewport&&visualViewport.addEventListener("resize",t);var e=r||window;return e.addEventListener("scroll",t),function(){visualViewport&&visualViewport.removeEventListener("resize",t),e.removeEventListener("scroll",t)}}},[r]),a},n=function(t){var e=r({target:(void 0===t?{target:void 0}:t).target}),o=e.toTop,n=e.toCenter,a=e.toBottom;return i()>0?{fixedTop:{position:"absolute",top:0,transform:"translateY("+o+"px)"},fixedCenter:{position:"absolute",top:0,bottom:"auto",transform:"translateY(calc(-50% + "+n+"px))"},fixedBottom:{position:"absolute",top:0,bottom:"auto",transform:"translateY(calc(-100% + "+a+"px))"}}:{fixedTop:{},fixedCenter:{},fixedBottom:{}}};export{n as useFixedStyleWithIOsKeyboard,i as useIOsKeyboardHeight,r as useViewportDistanceFromPageTop};

lib/index.umd.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e||self).reactIosKeyboardViewport={},e.react)}(this,function(e,t){var o=function(){return/iPhone|iPod/.test(navigator.userAgent)},i=function(){var e=t.useState(0),i=e[0],r=e[1];return t.useEffect(function(){if(o()){var e=function(){if(visualViewport){var e=visualViewport.height<window.innerHeight?window.innerHeight-visualViewport.height:0;r(e)}};return visualViewport&&visualViewport.addEventListener("resize",e),function(){visualViewport&&visualViewport.removeEventListener("resize",e)}}},[]),i},r=function(){var e=t.useState({toTop:0,toCenter:0,toBottom:0}),i=e[0],r=e[1];return t.useEffect(function(){if(o()){var e=function(){var e,t=window.scrollY,o=window.scrollY+((null==(e=visualViewport)?void 0:e.height)||0);r({toTop:t,toCenter:t+(o-t)/2,toBottom:o})};return visualViewport&&visualViewport.addEventListener("resize",e),window.addEventListener("scroll",e),function(){visualViewport&&visualViewport.removeEventListener("resize",e),window.removeEventListener("scroll",e)}}},[]),i};e.useFixedStyleWithIOsKeyboard=function(){var e=r(),t=e.toTop,o=e.toCenter,n=e.toBottom;return i()>0?{fixedTop:{position:"absolute",top:0,transform:"translateY("+t+"px)"},fixedCenter:{position:"absolute",top:0,bottom:"auto",transform:"translateY(calc(-50% + "+o+"px))"},fixedBottom:{position:"absolute",top:0,bottom:"auto",transform:"translateY(calc(-100% + "+n+"px))"}}:{fixedTop:{},fixedCenter:{},fixedBottom:{}}},e.useIOsKeyboardHeight=i,e.useViewportDistanceFromPageTop=r});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e||self).reactIosKeyboardViewport={},e.react)}(this,function(e,t){var o=function(){return/iPhone|iPod/.test(navigator.userAgent)},i=function(){var e=t.useState(0),i=e[0],n=e[1];return t.useEffect(function(){if(o()){var e=function(){if(visualViewport){var e=visualViewport.height<window.innerHeight?window.innerHeight-visualViewport.height:0;n(e)}};return visualViewport&&visualViewport.addEventListener("resize",e),function(){visualViewport&&visualViewport.removeEventListener("resize",e)}}},[]),i},n=function(e){var i=(void 0===e?{target:void 0}:e).target,n=t.useState({toTop:0,toCenter:0,toBottom:0}),r=n[0],a=n[1];return t.useEffect(function(){if(o()){var e=function(){var e,t=i?i instanceof HTMLElement||i instanceof Element?i.scrollTop:i instanceof Document?i.documentElement.scrollTop:window.scrollY:window.scrollY,o=t+((null==(e=visualViewport)?void 0:e.height)||0);a({toTop:t,toCenter:t+(o-t)/2,toBottom:o})};visualViewport&&visualViewport.addEventListener("resize",e);var t=i||window;return t.addEventListener("scroll",e),function(){visualViewport&&visualViewport.removeEventListener("resize",e),t.removeEventListener("scroll",e)}}},[i]),r};e.useFixedStyleWithIOsKeyboard=function(e){var t=n({target:(void 0===e?{target:void 0}:e).target}),o=t.toTop,r=t.toCenter,a=t.toBottom;return i()>0?{fixedTop:{position:"absolute",top:0,transform:"translateY("+o+"px)"},fixedCenter:{position:"absolute",top:0,bottom:"auto",transform:"translateY(calc(-50% + "+r+"px))"},fixedBottom:{position:"absolute",top:0,bottom:"auto",transform:"translateY(calc(-100% + "+a+"px))"}}:{fixedTop:{},fixedCenter:{},fixedBottom:{}}},e.useIOsKeyboardHeight=i,e.useViewportDistanceFromPageTop=n});

lib/types.d.ts

@@ -18,2 +18,3 @@ import type React from 'react';
 };
+export type Target = HTMLElement | Element | Window | Document | null | undefined;
 //# sourceMappingURL=types.d.ts.map

lib/useFixedStyleWithIOsKeyboard.d.ts

@@ -1,4 +0,7 @@
-import type { FixedStyle } from './types';
-declare const useFixedStyleWithIOsKeyboard: () => FixedStyle;
+import type { FixedStyle, Target } from './types';
+export type UseFixedStyleWithIOsKeyboardProps = {
+    target?: Target;
+};
+declare const useFixedStyleWithIOsKeyboard: ({ target }?: UseFixedStyleWithIOsKeyboardProps) => FixedStyle;
 export default useFixedStyleWithIOsKeyboard;
 //# sourceMappingURL=useFixedStyleWithIOsKeyboard.d.ts.map

lib/useViewportDistanceFromPageTop.d.ts

@@ -1,4 +0,7 @@
-import type { Distance } from './types';
-declare const useViewportDistanceFromPageTop: () => Distance;
+import type { Distance, Target } from './types';
+export type UseViewportDistanceFromPageTopProps = {
+    target?: Target;
+};
+declare const useViewportDistanceFromPageTop: ({ target }?: UseViewportDistanceFromPageTopProps) => Distance;
 export default useViewportDistanceFromPageTop;
 //# sourceMappingURL=useViewportDistanceFromPageTop.d.ts.map

package.json

 {
   "name": "react-ios-keyboard-viewport",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "A React hook that dynamically adjusts element positioning during iOS keyboard display, utilizing the Visual Viewport API for precise calculations.",
@@ -5,0 +5,0 @@ "author": "RyoSogawa",

README.md

@@ -5,5 +5,14 @@ # 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                                                                                                       |
+|---------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------|
+| <div style="max-width:200px">![default](./docs/default.gif)</div>                                             | <div style="max-width:200px">![fixed](./docs/fixed.gif)</div>                                               |
+| [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
@@ -23,3 +32,3 @@ - 📱 Overriding styles specifically when the iOS keyboard is displayed
 ### useFixedStyleWithIOsKeyboard
-This hook generates a style object for elements that you want to fix to the Top/Center/Bottom of the screen.
+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.
@@ -49,3 +58,3 @@
 ### useViewportDistanceFromPageTop 
-This hook calculates the distance from the top of the page to the Top/Center/Bottom of the visualViewport.
+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.
@@ -59,3 +68,3 @@
 ### useIOsKeyboardHeight
-This hook calculates the height of the virtual keyboard of iOS. 
+This hook calculates the height of the virtual keyboard of iOS.   
 It is used inside useFixedStyleWithIosKeyboard to determine whether the iOS keyboard is open.
@@ -62,0 +71,0 @@

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19325

18.45%

Lines of code

73

17.74%

Number of low quality alerts

4

-33.33%

Number of lines in readme file

79

12.86%

No dependency changes