Light

bmcmahen / react-image-enlarger Goto Github PK

View Code? Open in Web Editor NEW

71.0 3.0 6.0 3.92 MB

Simple medium.com style image zooming with gesture support

Home Page: https://codesandbox.io/embed/adoring-sun-dz5yj

JavaScript 12.33% TypeScript 87.67%

image-zoom image-enlarger react medium-zoom medium-image gesture

react-image-enlarger's Introduction

react-image-enlarger

A medium.com style image zoom component with gesture dismissal similar to that found in the iOS Photos app. Originally built for use in Sancho-UI. Try the demo here.

Features

Drag to dismiss
Optionally use a differernt enlarged image source
Optional loading indicator when loading the enlarged image
Spring based animations

Install

Install react-image-enlarger and react-gesture-responder using yarn or npm.

yarn add react-image-enlarger react-gesture-responder

Usage

import Image from "react-image-enlarger";

function SingleSource() {
  const [zoomed, setZoomed] = React.useState(false);

  return (
    <Image
      style={{ width: "200px", height: "auto" }}
      zoomed={zoomed}
      src="my-image.jpg"
      alt="The best dog ever"
      onClick={() => setZoomed(true)}
      onRequestClose={() => setZoomed(false)}
    />
  );
}

API

Any additional props beyond the ones listed below are passed to the thumbnail image.

Name	Type	Default Value	Description
zoomed*	boolean		Whether the enlarged image is shown
onRequestClose*	() => void;		A callback for closing the zoomed image
renderLoading	React.ReactNode		Render a loading indicator
src*	String		The thumbnail image source (and enlarged, if not provided)
enlargedSrc	String		An optional larger image source
overlayColor	String		Customize the background color of the overlay

License

MIT

react-image-enlarger's People

Contributors

Stargazers

Watchers

Forkers

nenjotsu rcadecaro christianchenn empire0x lilinlichunxiao sreedevz

react-image-enlarger's Issues

Wrong location of image if container has "transform" style

I'm using MaterialUI v4 and I'm trying to use react-image-enlarger inside of a modal. It looks like the location is incorrect as long as the modal has "transform" set.

Sandbox: https://codesandbox.io/s/react-image-enlarge-modal-bug-pviqp

In the sandbox you can comment/uncomment the transform to see how it is effecting the image placement.

Drop dependencies

I see you added react-spring as a dependency, but that's usually an app dependency, not a library dependency. Maybe the library should be dependency free?

You can see react-spring is making the bundle ~15x bigger:
https://bundlephobia.com/[email protected]

Alt tag raises type error

src/components/ImageGrid.tsx:43:17 - error TS2322: Type '{ className: string; style: { width: string; height: string; }; alt: string; src: string; onClick: () => void; onRequestClose: () => void; zoomed: boolean; }' is not assignable to type 'IntrinsicAttributes & ImageEnlargerProps & { children?: ReactNode; }'.
Property 'alt' does not exist on type 'IntrinsicAttributes & ImageEnlargerProps & { children?: ReactNode; }'.

43 alt='View more of this design'

Custom background overlay color

Cool lib!

I see the overlay is white, but that is not ideal for dark themed pages.
Maybe it should support an overlayColor prop?

Can't swipe / scroll after clicking on image

Hi, So I'm using your component in two of my create-react-app websites. After I click on the image, it zooms in, and then I click elsewhere to close the modal. However, then, I'm no longer able to swipe or scroll until I click the image AGAIN, and close the modal again, and then i'm able to continue swiping or scrolling.

I am able to tap or click on other buttons/links on my page ok, it's just swiping or scrolling that gets disabled. On one of my sites, it only happens on mobile, and I just tried adding it on my other site, and here the issue happens on both phone and laptop. https://mcshazz.github.io/NetWorkers/ go to the About page, and click/unclick the dog, then try swipe or scoll up and down.

When I open your codesandbox on my phone, it works fine. I'm able to just open/close the modal once, and then can continue swiping / scrolling as usual.

Any idea what might be causing this behavior on my sites?

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.