This plugin allows you to detect browser's and separate element's zoom level.
It is lightweight and has no dependencies!
npm install zoom-level
# or via yarn
yarn add zoom-levelINSTALLATION NOTE:
This lib is written in ES6+ and delivering with both, transpiled and untranspiled versions:
mainfield ofpackage.jsonis pointing ES5 with CJS modules resolution;modulefield is pointing to ES5 with ES modules resolution;esnextfield is pointing to ESNext with ES modules resolution;
Depending on your targets you may have to use Webpack and/or
Babel to pull untranspiled version of package.
See some tips on wiring thing
up: https://2ality.com/2017/06/pkg-esnext.html
import zoomLevel from "zoom-level";
zoomLevel(); // 1;
window.addEventListener("resize", () => {
zoomLevel(); // will return current browser's zoom level
});Or, in case you want to detect separate element's zoom level (they can use own zoom CSS property
which stacks with browser's one);
import { elementZoomLevel } from "zoom-level";
const zoomedBlock = document.createElement("div");
zoomedBlock.style.zoom = 0.5;
zoomedBlock.style.width = "150px";
zoomedBlock.style.height = "150px";
zoomedBlock.style.margin = "32px";
zoomedBlock.style.padding = "32px";
zoomedBlock.style.background = "rgba(0,0,0,.05)";
zoomedBlock.innerText = "Lorem ipusm dolor sit amet";
document.appendChild(zoomedBlock);
elementZoomLevel(zoomedBlock); // 0.5;
window.addEventListener("resize", () => {
elementZoomLevel(zoomedBlock); // if you zoom to 200% it'll be 1
});Sadly i have no idea how to manage testing of this package, due to there is no known ways to control
browser's zoom level.
If you know how to do it - please let me know.
- react-scrollbars-custom — The best React custom scrollbars component. Allows you to customise scrollbars as you like it, crossbrowser!
- @xobotyi/scrollbar-width — A tool to get browser's scrollbars width.
- @xobotyi/should-reverse-rtl-scroll — A tool detecting if RTL scroll value should be negative.
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent