Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/samuelmeuli/react-magnifier
🔍 React image zoom component
https://github.com/samuelmeuli/react-magnifier
component image image-zoom magnifier magnifying-glass react react-component zoom
Last synced: 7 days ago
JSON representation
🔍 React image zoom component
- Host: GitHub
- URL: https://github.com/samuelmeuli/react-magnifier
- Owner: samuelmeuli
- License: mit
- Created: 2018-02-02T19:28:12.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-02-15T11:29:24.000Z (11 months ago)
- Last Synced: 2024-11-29T09:07:17.338Z (about 2 months ago)
- Topics: component, image, image-zoom, magnifier, magnifying-glass, react, react-component, zoom
- Language: TypeScript
- Homepage: https://react-magnifier.samuelmeuli.com/
- Size: 18.1 MB
- Stars: 153
- Watchers: 3
- Forks: 41
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-magnifier
**React image zoom component**
- Simple and customizable
- Supports touch screens
- Allows different files for large image and magnifying glass (e.g. thumbnail and high-resolution image)
→ **[Demo](https://react-magnifier.samuelmeuli.com)**
## Usage
Install the package using NPM:
```
npm install react-magnifier
```
Add the component to your React application:
```jsx
import Magnifier from "react-magnifier";
import yourImage from "./path/to/image";
export default function ExampleComponent() {
return ;
}
```
## Configuration
| Prop | Type | Default | Description |
| ---------------- | ------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `src` (required) | String | – | URL/path of the large image |
| `height` | Number/String | `'auto'` | Image height (absolute or relative values possible) |
| `width` | Number/String | `'100%'` | Image width (absolute or relative values possible) |
| `className` | String | `''` | Class which will be applied to the image wrapper |
| `zoomImgSrc` | String | – | URL/path of the image inside the magnifying glass (if not specified, the large image will be used) |
| `zoomFactor` | Number | `1.5` | Factor by which the zoom image will be scaled (based on the size of the large image) |
| `mgWidth` | Number | `150` | Width of the magnifying glass in px |
| `mgHeight` | Number | `150` | Height of the magnifying glass in px |
| `mgBorderWidth` | Number | `2` | Border width of the magnifying glass in px |
| `mgShape` | String | `'circle'` | Shape of the magnifying glass (possible values: `'circle'`, `'square'`) |
| `mgShowOverflow` | Boolean | `true` | Set this to `false` to cut off the magnifying glass at the image borders. When disabling `mgShowOverflow`, it's recommended that you also set all offsets to `0` |
| `mgMouseOffsetX` | Number | `0` | Horizontal offset of the magnifying glass in px when hovering with a mouse |
| `mgMouseOffsetY` | Number | `0` | Vertical offset of the magnifying glass in px when hovering with a mouse |
| `mgTouchOffsetX` | Number | `-50` | Horizontal offset of the magnifying glass in px when dragging on a touch screen |
| `mgTouchOffsetY` | Number | `-50` | Vertical offset of the magnifying glass in px when dragging on a touch screen |
Any other props will be passed down to the `![]()
` element. This way, you can e.g. add an `alt` attribute to the image.
## Custom styling
```css
.magnifier {
/* Styles for
around image and magnifying glass */
}
.magnifier-image {
/* Styles for large image */
}
.magnifying-glass {
/* Styles for magnifying glass */
}
```
## Development
Requirements: Node.js, Yarn
1. Clone this repository: `git clone [repo-url]`
2. Install all dependencies: `yarn install`
3. Run `yarn start` to generate the library bundle using [Rollup](https://github.com/rollup/rollup) and see the component in action using [Storybook](https://github.com/storybooks/storybook)
Suggestions and contributions are always welcome! Please first discuss changes via issue before submitting a pull request.