joshuadesigner05 / next-image-zoom

Medium.com style image zoom for nextjs

Next Image Zoom

Medium.com image zoom style for Next.js optimized image component

Demo

Please check Demo here.

Installation

Install package with npm

NPM

  npm install --save next-image-zoom

Yarn

  yarn add next-image-zoom

Usage/Examples

First import Zoom component

import Zoom from "next-image-zoom";

layout={'responsive'}

import Zoom from "next-image-zoom";

<div style={{width: 700}}>
    <Zoom src={image1} layout={"responsive"}/>
</div>

layout={'fill'}

import Zoom from "next-image-zoom";

<div style={{flex: "1", height: 300, backgroundColor: "yellow"}}>
    <Zoom src={image4} layout={"fill"} objectFit={"contain"}/>
</div>

layout={'fixed'}

import Zoom from "next-image-zoom";

<Zoom src={image2} layout={"fixed"} width={200} height={400}/>

import Zoom from "next-image-zoom";

<Zoom src={"/surface-LCOnczVeFio-unsplash-2.jpg"} layout={"responsive"} width={800} height={500}/>

License

MIT

Support

For support, email [e-mail].

🚀 About Me

I'm a full stack web developer that has hunger for learning new things 😋

🔗 Links