Skip to content

Commit 48e24b6

Browse files
samuelmeulisamuelmeuli
committed
Reformat files using Prettier
1 parent dd37698 commit 48e24b6

File tree

6 files changed

+109
-131
lines changed

6 files changed

+109
-131
lines changed

‎.storybook/config.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { configure } from '@storybook/react';
1+
import { configure } from "@storybook/react";
22

33
// Import all stories
4-
const imports = require.context('../stories', true, /.stories.js$/);
4+
const imports = require.context("../stories", true, /.stories.js$/);
55
function loadStories() {
6-
imports.keys().forEach((filename) => imports(filename));
6+
imports.keys().forEach(filename => imports(filename));
77
}
88

99
configure(loadStories, module);

‎README.md‎

Lines changed: 25 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,16 @@
22

33
**React image zoom component**
44

5-
* Simple and customizable
6-
* Supports touch screens
7-
* Allows different files for large image and magnifying glass (e.g. thumbnail and high-resolution image)
5+
- Simple and customizable
6+
- Supports touch screens
7+
- Allows different files for large image and magnifying glass (e.g. thumbnail and high-resolution image)
88

99
→ **[Demo](https://samuelmeuli.github.io/react-magnifier)**
1010

1111
<p align="center">
1212
<img src=".github/demo.gif" width=600 alt="Demo">
1313
</p>
1414

15-
1615
## Usage
1716

1817
Install the package using NPM:
@@ -24,39 +23,38 @@ npm install react-magnifier
2423
Add the component to your React application:
2524

2625
```jsx
27-
import Magnifier from 'react-magnifier';
28-
import yourImage from './path/to/image';
26+
import Magnifier from "react-magnifier";
27+
import yourImage from "./path/to/image";
2928

30-
// Somewhere in your code:
31-
<Magnifier src={yourImage} width={500} />
29+
export default function ExampleComponent() {
30+
return <Magnifier src={logo} width={500} />;
31+
}
3232
```
3333

34-
3534
## Configuration
3635

37-
Prop | Type | Default | Description
38-
---- | ---- | ------- | -----------
39-
`src` (required) | String | – | URL/path of the large image
40-
`height` | Number/String | `'auto'` | Image height (absolute or relative values possible)
41-
`width` | Number/String | `'100%'` | Image width (absolute or relative values possible)
42-
`className` | String | `''` | Class which will be applied to the image wrapper
43-
`zoomImgSrc` | String | – | URL/path of the image inside the magnifying glass (if not specified, the large image will be used)
44-
`zoomFactor` | Number | `1.5` | Factor by which the zoom image will be scaled (based on the size of the large image)
45-
`mgWidth` | Number | `150` | Width of the magnifying glass in px
46-
`mgHeight` | Number | `150` | Height of the magnifying glass in px
47-
`mgBorderWidth` | Number | `2` | Border width of the magnifying glass in px
48-
`mgShape` | String | `'circle'` | Shape of the magnifying glass (possible values: `'circle'`, `'square'`)
49-
`mgShowOverflow` | Boolean | `true` | Set this to `false` to cut off the magnifying glass at the image borders
50-
`mgMouseOffsetX` | Number | `0` | Horizontal offset of the magnifying glass in px when hovering with a mouse
51-
`mgMouseOffsetY` | Number | `0` | Vertical offset of the magnifying glass in px when hovering with a mouse
52-
`mgTouchOffsetX` | Number | `-50` | Horizontal offset of the magnifying glass in px when dragging on a touch screen
53-
`mgTouchOffsetY` | Number | `-50` | Vertical offset of the magnifying glass in px when dragging on a touch screen
36+
| Prop | Type | Default | Description |
37+
| ---------------- | ------------- | ---------- | -------------------------------------------------------------------------------------------------- |
38+
| `src` (required) | String | – | URL/path of the large image |
39+
| `height` | Number/String | `'auto'` | Image height (absolute or relative values possible) |
40+
| `width` | Number/String | `'100%'` | Image width (absolute or relative values possible) |
41+
| `className` | String | `''` | Class which will be applied to the image wrapper |
42+
| `zoomImgSrc` | String | – | URL/path of the image inside the magnifying glass (if not specified, the large image will be used) |
43+
| `zoomFactor` | Number | `1.5` | Factor by which the zoom image will be scaled (based on the size of the large image) |
44+
| `mgWidth` | Number | `150` | Width of the magnifying glass in px |
45+
| `mgHeight` | Number | `150` | Height of the magnifying glass in px |
46+
| `mgBorderWidth` | Number | `2` | Border width of the magnifying glass in px |
47+
| `mgShape` | String | `'circle'` | Shape of the magnifying glass (possible values: `'circle'`, `'square'`) |
48+
| `mgShowOverflow` | Boolean | `true` | Set this to `false` to cut off the magnifying glass at the image borders |
49+
| `mgMouseOffsetX` | Number | `0` | Horizontal offset of the magnifying glass in px when hovering with a mouse |
50+
| `mgMouseOffsetY` | Number | `0` | Vertical offset of the magnifying glass in px when hovering with a mouse |
51+
| `mgTouchOffsetX` | Number | `-50` | Horizontal offset of the magnifying glass in px when dragging on a touch screen |
52+
| `mgTouchOffsetY` | Number | `-50` | Vertical offset of the magnifying glass in px when dragging on a touch screen |
5453

5554
Any other props will be passed down to the `<img>` element.
5655

5756
When disabling `mgShowOverflow`, it's recommended that you also set all offsets to `0`.
5857

59-
6058
## Custom styling
6159

6260
```scss
@@ -73,7 +71,6 @@ When disabling `mgShowOverflow`, it's recommended that you also set all offsets
7371
}
7472
```
7573

76-
7774
## Development
7875

7976
Requirements: Node.js, Yarn

‎rollup.config.js‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,27 @@
1-
import babel from 'rollup-plugin-babel';
2-
import postcss from 'rollup-plugin-postcss';
3-
4-
import pkg from './package.json';
1+
import babel from "rollup-plugin-babel";
2+
import postcss from "rollup-plugin-postcss";
53

4+
import pkg from "./package.json";
65

76
export default {
8-
input: 'src/Magnifier',
7+
input: "src/Magnifier",
98
output: [
109
{
1110
file: pkg.main,
12-
format: 'cjs',
11+
format: "cjs",
1312
sourcemap: true,
1413
},
1514
{
1615
file: pkg.module,
17-
format: 'es',
16+
format: "es",
1817
sourcemap: true,
1918
},
2019
],
21-
external: ['react', 'prop-types', 'lodash.debounce', 'lodash.throttle'],
20+
external: ["react", "prop-types", "lodash.debounce", "lodash.throttle"],
2221
plugins: [
2322
postcss(),
2423
babel({
25-
exclude: 'node_modules/**',
24+
exclude: "node_modules/**",
2625
}),
2726
],
2827
};

‎src/Magnifier.js‎

Lines changed: 56 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import React, { PureComponent } from 'react';
2-
import PropTypes from 'prop-types';
3-
import debounce from 'lodash.debounce';
4-
import throttle from 'lodash.throttle';
5-
6-
import './style.scss';
1+
import React, { PureComponent } from "react";
2+
import PropTypes from "prop-types";
3+
import debounce from "lodash.debounce";
4+
import throttle from "lodash.throttle";
75

6+
import "./style.scss";
87

98
const propTypes = {
109
// Image
@@ -21,7 +20,7 @@ const propTypes = {
2120
mgWidth: PropTypes.number,
2221
mgHeight: PropTypes.number,
2322
mgBorderWidth: PropTypes.number,
24-
mgShape: PropTypes.oneOf(['circle', 'square']),
23+
mgShape: PropTypes.oneOf(["circle", "square"]),
2524
mgShowOverflow: PropTypes.bool,
2625
mgMouseOffsetX: PropTypes.number,
2726
mgMouseOffsetY: PropTypes.number,
@@ -31,9 +30,9 @@ const propTypes = {
3130

3231
const defaultProps = {
3332
// Image
34-
width: '100%',
35-
height: 'auto',
36-
className: '',
33+
width: "100%",
34+
height: "auto",
35+
className: "",
3736

3837
// Zoom image
3938
zoomImgSrc: null,
@@ -43,7 +42,7 @@ const defaultProps = {
4342
mgWidth: 150,
4443
mgHeight: 150,
4544
mgBorderWidth: 2,
46-
mgShape: 'circle',
45+
mgShape: "circle",
4746
mgShowOverflow: true,
4847
mgMouseOffsetX: 0,
4948
mgMouseOffsetY: 0,
@@ -66,7 +65,7 @@ export default class Magnifier extends PureComponent {
6665
constructor(props) {
6766
super(props);
6867
if (!props.src) {
69-
throw Error('Missing src prop');
68+
throw Error("Missing src prop");
7069
}
7170

7271
this.state = {
@@ -95,29 +94,29 @@ export default class Magnifier extends PureComponent {
9594
componentDidMount() {
9695
// Add mouse/touch event listeners to image element (assigned in render function)
9796
// `passive: false` prevents scrolling on touch move
98-
this.img.addEventListener('mouseenter', this.onMouseEnter, { passive: false });
99-
this.img.addEventListener('mousemove', this.onMouseMove, { passive: false });
100-
this.img.addEventListener('mouseout', this.onMouseOut, { passive: false });
101-
this.img.addEventListener('touchstart', this.onTouchStart, { passive: false });
102-
this.img.addEventListener('touchmove', this.onTouchMove, { passive: false });
103-
this.img.addEventListener('touchend', this.onTouchEnd, { passive: false });
97+
this.img.addEventListener("mouseenter", this.onMouseEnter, { passive: false });
98+
this.img.addEventListener("mousemove", this.onMouseMove, { passive: false });
99+
this.img.addEventListener("mouseout", this.onMouseOut, { passive: false });
100+
this.img.addEventListener("touchstart", this.onTouchStart, { passive: false });
101+
this.img.addEventListener("touchmove", this.onTouchMove, { passive: false });
102+
this.img.addEventListener("touchend", this.onTouchEnd, { passive: false });
104103

105104
// Re-calculate image bounds on window resize
106-
window.addEventListener('resize', this.calcImgBoundsDebounced);
105+
window.addEventListener("resize", this.calcImgBoundsDebounced);
107106
// Re-calculate image bounds on scroll (useCapture: catch scroll events in entire DOM)
108-
window.addEventListener('scroll', this.calcImgBoundsDebounced, true);
107+
window.addEventListener("scroll", this.calcImgBoundsDebounced, true);
109108
}
110109

111110
componentWillUnmount() {
112111
// Remove all event listeners
113-
this.img.removeEventListener('mouseenter', this.onMouseMove);
114-
this.img.removeEventListener('mousemove', this.onMouseMove);
115-
this.img.removeEventListener('mouseout', this.onMouseMove);
116-
this.img.removeEventListener('touchstart', this.onMouseMove);
117-
this.img.removeEventListener('touchmove', this.onMouseMove);
118-
this.img.removeEventListener('touchend', this.onMouseMove);
119-
window.removeEventListener('resize', this.calcImgBoundsDebounced);
120-
window.removeEventListener('scroll', this.calcImgBoundsDebounced, true);
112+
this.img.removeEventListener("mouseenter", this.onMouseMove);
113+
this.img.removeEventListener("mousemove", this.onMouseMove);
114+
this.img.removeEventListener("mouseout", this.onMouseMove);
115+
this.img.removeEventListener("touchstart", this.onMouseMove);
116+
this.img.removeEventListener("touchmove", this.onMouseMove);
117+
this.img.removeEventListener("touchend", this.onMouseMove);
118+
window.removeEventListener("resize", this.calcImgBoundsDebounced);
119+
window.removeEventListener("scroll", this.calcImgBoundsDebounced, true);
121120
}
122121

123122
onMouseEnter() {
@@ -141,6 +140,12 @@ export default class Magnifier extends PureComponent {
141140
}
142141
}
143142

143+
onMouseOut() {
144+
this.setState({
145+
showZoom: false,
146+
});
147+
}
148+
144149
onTouchStart(e) {
145150
e.preventDefault(); // Prevent mouse event from being fired
146151

@@ -172,12 +177,6 @@ export default class Magnifier extends PureComponent {
172177
}
173178
}
174179

175-
onMouseOut() {
176-
this.setState({
177-
showZoom: false,
178-
});
179-
}
180-
181180
onTouchEnd() {
182181
this.setState({
183182
showZoom: false,
@@ -212,12 +211,12 @@ export default class Magnifier extends PureComponent {
212211
const { mgOffsetX, mgOffsetY, relX, relY, showZoom } = this.state;
213212

214213
// Show/hide magnifying glass (opacity needed for transition)
215-
let mgClasses = 'magnifying-glass';
214+
let mgClasses = "magnifying-glass";
216215
if (showZoom) {
217-
mgClasses += ' visible';
216+
mgClasses += " visible";
218217
}
219-
if (mgShape === 'circle') {
220-
mgClasses += ' circle';
218+
if (mgShape === "circle") {
219+
mgClasses += " circle";
221220
}
222221

223222
return (
@@ -226,7 +225,7 @@ export default class Magnifier extends PureComponent {
226225
style={{
227226
width,
228227
height,
229-
overflow: mgShowOverflow ? 'visible' : 'hidden',
228+
overflow: mgShowOverflow ? "visible" : "hidden",
230229
}}
231230
>
232231
<img // eslint-disable-line jsx-a11y/alt-text
@@ -238,28 +237,27 @@ export default class Magnifier extends PureComponent {
238237
onLoad={() => {
239238
this.calcImgBounds();
240239
}}
241-
ref={(e) => {
240+
ref={e => {
242241
this.img = e;
243242
}}
244243
/>
245-
{
246-
this.imgBounds
247-
&& (
248-
<div
249-
className={mgClasses}
250-
style={{
251-
width: mgWidth,
252-
height: mgHeight,
253-
left: `calc(${relX * 100}% - ${mgWidth / 2}px + ${mgOffsetX}px - ${mgBorderWidth}px)`,
254-
top: `calc(${relY * 100}% - ${mgHeight / 2}px + ${mgOffsetY}px - ${mgBorderWidth}px)`,
255-
backgroundImage: `url(${zoomImgSrc || src})`,
256-
backgroundPosition: `calc(${relX * 100}% + ${mgWidth / 2}px - ${relX * mgWidth}px) calc(${relY * 100}% + ${mgHeight / 2}px - ${relY * mgWidth}px)`,
257-
backgroundSize: `${zoomFactor * this.imgBounds.width}% ${zoomFactor * this.imgBounds.height}%`,
258-
borderWidth: mgBorderWidth,
259-
}}
260-
/>
261-
)
262-
}
244+
{this.imgBounds && (
245+
<div
246+
className={mgClasses}
247+
style={{
248+
width: mgWidth,
249+
height: mgHeight,
250+
left: `calc(${relX * 100}% - ${mgWidth / 2}px + ${mgOffsetX}px - ${mgBorderWidth}px)`,
251+
top: `calc(${relY * 100}% - ${mgHeight / 2}px + ${mgOffsetY}px - ${mgBorderWidth}px)`,
252+
backgroundImage: `url(${zoomImgSrc || src})`,
253+
backgroundPosition: `calc(${relX * 100}% + ${mgWidth / 2}px - ${relX *
254+
mgWidth}px) calc(${relY * 100}% + ${mgHeight / 2}px - ${relY * mgWidth}px)`,
255+
backgroundSize: `${zoomFactor * this.imgBounds.width}% ${zoomFactor *
256+
this.imgBounds.height}%`,
257+
borderWidth: mgBorderWidth,
258+
}}
259+
/>
260+
)}
263261
</div>
264262
);
265263
}

‎src/style.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
position: absolute;
1313
z-index: 1;
1414
transition: opacity 0.3s;
15-
background: #E5E5E5 no-repeat; // Use opaque background to hide main image when using an offset
16-
border: solid #EBEBEB;
15+
background: #e5e5e5 no-repeat; // Use opaque background to hide main image when using an offset
16+
border: solid #ebebeb;
1717
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
1818
pointer-events: none;
1919
opacity: 0; // Needed for transition

0 commit comments

Comments
 (0)