Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React 16 and createPortal #5

Open
wants to merge 13 commits into
base: master
Choose a base branch
from
Open

React 16 and createPortal #5

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
c277f7d
chore: update for react16, stop using createClass
chollier Oct 17, 2017
7ee3171
Update packages
annalo Dec 4, 2017
0a6fea0
Update components to use createPortal
annalo Dec 4, 2017
5e69676
Update readme
annalo Dec 4, 2017
256ef13
Build lib
annalo Dec 4, 2017
e61bfb2
Fix default props and state
annalo Dec 4, 2017
59582b3
Fix src arg error
annalo Dec 4, 2017
24bf768
TEMP REMOVE EXAMPLE
annalo Dec 4, 2017
8e90aca
Remove position abs from container
annalo Dec 11, 2017
1010bec
Merge branch 'master' into react-16-test
annalo Dec 11, 2017
82dec45
use shape for PropTypes
alfondotnet Apr 6, 2018
6ccf106
fix Magnifier shape in src/
alfondotnet Apr 6, 2018
eabcc12
bump version
alfondotnet Apr 6, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,39 @@
# react-image-magnifier
A react component that accepts a high-res source image and produces a magnifier window on mouse hover over the part of the image the cursor is over

A react component that accepts a high-res source image and produces a magnifier
window on mouse hover over the part of the image the cursor is over

## Demo

![](http://media.giphy.com/media/xTiTnidsMNlZlf9I2c/giphy.gif)


## Usage

```jsx
import ImageMagnifer from 'react-image-magnifier';
import ImageMagnifer from "react-image-magnifier";

const App = () => (
<ImageMagnifier
src="img/beach-small.jpg"
height={300}
width={400}
zoomImage={{
height: 1200,
width: 1600,
height: 1200
}}
cursorOffset={{ x: 80, y: -80 }}
cursorOffset={{ left: 80, top: -80 }}
/>
)
);
```

## API (props)

| Prop | Required | Default | Type | Description |
| :------------- |:---:|:----------------:| :--------------------| :-----|
| `src` | YES | | `String` | URL of image |
| `height` | NO | `"auto"` | `Number` or `String` | height non-zoomed-in image |
| `width` | NO | `"100%"` | `Number` or `String` | width of the non-zoomed-in image |
| `zoomImage` | NO | src size | `{ width, height }` | size of the zoomed-in image |
| `cursorOffset` | NO | `{ x: 0, y: 0 }` | `{ x, y }` | offset of the zoom bubble from the cursor |
| `size` | NO | `200` | `Number` | size of the magnifier window |
| `style` | NO | | `Object` | optional styling |
| Prop | Required | Default | Type | Description |
| :-------------- | :------: | :-------------------: | :------------------- | :---------------------------------------- |
| `src` | YES | | `String` | URL of image |
| `height` | NO | `"auto"` | `Number` or `String` | height non-zoomed-in image |
| `width` | NO | `"100%"` | `Number` or `String` | width of the non-zoomed-in image |
| `zoomImage` | NO | original image size | `{ height, width }` | size of the zoomed-in image |
| `cursorOffset` | NO | `{ left: 0, top: 0 }` | `{ left, top }` | offset of the zoom bubble from the cursor |
| `magnifierSize` | NO | `200` | `Number` | size of the magnifier window |
| `style` | NO | | `Object` | optional styling |
Loading