Newlyweds Proposing Marriage

    react-image-zoom-hook
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.13 • Public • Published

    Image zoom react hook

    Github Actions Test | simbathesailor/react-image-zoom-hook npm version

    Installing

    If using npm, Run

     
    npm install --save react-image-zoom-hook
     

    If using yarn , Run

     
    yarn add react-image-zoom-hook
     

    Getting Started

    <>
      <div onMouseMove={moveLens} style={{ ...imgContainerDimesions }}>
        <div ref={meshRefCallback} style={{ ...lensDimensions }} />
     
        <img
          style={{
            ...imgDimesions
          }}
          ref={imgRefCallback}
          alt="test"
          src={img}
        />
      </div>
     
      <div style={{ ...previewLensDimensions }}>
        <img
          ref={imagePreviewRefCallback}
          alt="test-preview"
          src={previewImg}
          style={{
            ...previewImgDimensions
          }}
        />
      </div>
    </>

    Let's see the visual reperesentation of the layout described above in jsx

    Pictorial  representation

    Following are the segregation of properties based on different element

    Element Attributes returned by Hook
    Image Container moveLens, imgContainerDimesions
    Lens or Mesh lensDimensions, meshRefCallback
    Image imgDimesions, imgRefCallback
    Preview Image imagePreviewRefCallback, previewImgDimensions
    Preview Lens previewLensDimensions

    Customisation:

    1. It is fully customisable, as implementing component is in consumer's control.
    2. Any custom styling can be applied to all the elements mentioned in above table.

    Default Zoom

    /**
     
    * Example of default view
     
    */
    import React from "react";
    import useImageZoom from "react-image-zoom-hook";
     
    function DefaultZoomApp() {
      /**
     
    * Necessary inputs for useImageZoomHook
     
    */
     
      /**
     
    * The ratio of lens height and width on main image and the zoom image also
     
    * should remain same for correct working.
     
    */
     
      const imgHeight = 600;
     
      const imgWidth = 500;
     
      const lensHeight = 100;
     
      const lensWidth = 100;
     
      const previewLensHeight = 600;
     
      const img =
        "https://rukminim1.flixcart.com/image/880/1056/jw6pifk0/t-shirt/e/v/z/m-61ywn-lewel-original-imafgxd7dfg7uub2.jpeg?q=50";
     
      const previewImg =
        "https://rukminim1.flixcart.com/image/880/1056/jw6pifk0/t-shirt/e/v/z/m-61ywn-lewel-original-imafgxd7dfg7uub2.jpeg?q=90";
     
      const { DefaultView } = useImageZoom({
        imgHeight,
     
        imgWidth,
     
        lensHeight,
     
        lensWidth,
     
        previewLensHeight,
     
        img,
     
        previewImg
      });
     
      /**
     
    * Two images are involved here, user need to have a actual image and
     
    * one good quality image with higher resolution
     
    */
     
      return <div className="container">{DefaultView}</div>;
    }

    Customised Zoom

    /**
     
     * Example of customised zooming
     
    */
    import React from "react";
    import useImageZoom from "react-image-zoom-hook";
     
    function AppWithZoomCustomization() {
      /**
     
    * Necessary inputs for useImageZoomHook
     
    */
     
      /**
     
    * The ratio of lens height and width on main image and the zoom image also
     
    * should remain same for correct working.
     
    */
     
      const imgHeight = 600;
     
      const imgWidth = 500;
     
      const lensHeight = 100;
     
      const lensWidth = 100;
     
      const previewLensHeight = 600;
     
      const img =
        "https://rukminim1.flixcart.com/image/880/1056/jw6pifk0/t-shirt/e/v/z/m-61ywn-lewel-original-imafgxd7dfg7uub2.jpeg?q=50";
     
      const previewImg =
        "https://rukminim1.flixcart.com/image/880/1056/jw6pifk0/t-shirt/e/v/z/m-61ywn-lewel-original-imafgxd7dfg7uub2.jpeg?q=90";
     
      const {
        moveLens,
     
        imgDimesions,
     
        lensDimensions,
     
        previewLensDimensions,
     
        previewImgDimensions,
     
        imgContainerDimesions,
     
        imgRefCallback,
     
        meshRefCallback,
     
        imagePreviewRefCallback
      } = useImageZoom({
        imgHeight,
     
        imgWidth,
     
        lensHeight,
     
        lensWidth,
     
        previewLensHeight,
     
        img,
     
        previewImg
      });
     
      /**
     
    * Two images are involved here, user need to have a actual image and
     
    * one good quality image with higher resolution
     
    */
     
      return (
        <div className="container">
          <div
            className="img-main-container"
            onMouseMove={moveLens}
            style={{
              ...imgContainerDimesions
            }}
          >
            <div
              ref={meshRefCallback}
              className="mesh"
              style={{
                ...lensDimensions
              }}
            />
     
            <img
              style={{
                ...imgDimesions
              }}
              ref={imgRefCallback}
              alt="test"
              src={img}
            />
          </div>
     
          <div
            className="img-preview-section-container"
            // ref={imagePreviewRefContainer}
     
            style={{
              ...previewLensDimensions
            }}
          >
            <img
              ref={imagePreviewRefCallback}
              alt="test-preview"
              src={previewImg}
              style={{
                ...previewImgDimensions
              }}
              className="img-preview-section"
            />
          </div>
        </div>
      );
    }
     
    /**
     
    * Try to use both the types of image zoom
     
    * DefaultZoomApp : where you get the default zoom UI and also customizable
     
    * AppWithZoomCustomization: where user want to take control of different ui elements
     
    */
     
    ReactDOM.render(<AppWithZoomCustomization />, document.getElementById("root"));

    Type interface

    Result attributes types

    Gist for types above

    Running the tests

     
    yarn run test
     

    Contributing

    Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

    Versioning

    We use SemVer for versioning. For the versions available, see the tags on this repository.

    Authors

    simbathesailorPurpleBooth

    See also the list of contributors who participated in this project.

    Links

    Example customized zoom

    License

    This project is licensed under the MIT License - see the LICENSE.md file for details

    Contributors

    Thanks goes to these wonderful people (emoji key):

    Anil kumar chaudhary
    Anil kumar Chaudhary

    💻 🤔 🎨 📖 🐛

    Install

    npm i react-image-zoom-hook

    DownloadsWeekly Downloads

    185

    Version

    0.1.13

    License

    MIT

    Unpacked Size

    117 kB

    Total Files

    10

    Last publish

    Collaborators

    • anil26