zoom-level
    TypeScript icon, indicating that this package has built-in type declarations

    2.5.0 • Public • Published

    zoom-level

    NPM version NPM weekly downloads License Types definition Codacy Code Grade

    × LIVE EXAMPLE ×

    ❤️Please consider starring this project to show your love and support.🙌

    ABOUT

    This plugin allows you to detect browser's and separate element's zoom level.
    It is lightweight and has no dependencies!

    INSTALLATION

    npm install zoom-level
    # or via yarn 
    yarn add zoom-level

    INSTALLATION NOTE:
    This lib is written in ES6+ and delivering with both, transpiled and untranspiled versions:

    • main field of package.json is pointing to transpiled ES3-compatible version with CJS modules resolution;
    • module field is pointing to transpiled ES3-compatible version with ES modules resolution;
    • esnext field is pointing to the ES6+ version 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

    USAGE

    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
    });

    TESTS

    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.

    Related projects

    Install

    npm i zoom-level

    DownloadsWeekly Downloads

    38,423

    Version

    2.5.0

    License

    MIT

    Unpacked Size

    12.8 kB

    Total Files

    8

    Last publish

    Collaborators

    • xobotyi