https://github.com/tgxhx/react-image-zooms

A click on the react component of the zoom in image.
https://github.com/tgxhx/react-image-zooms

Last synced: 11 days ago
JSON representation

A click on the react component of the zoom in image.

• Host: GitHub
• URL: https://github.com/tgxhx/react-image-zooms
• Owner: tgxhx
• Created: 2019-05-16T15:19:54.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-05-17T15:49:12.000Z (over 5 years ago)
• Last Synced: 2024-12-20T15:52:36.369Z (18 days ago)
• Language: TypeScript
• Homepage: https://tgxhx.github.io/react-image-zooms/
• Size: 139 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-image-zooms

> A click on the react component of the zoom in image [Demo](https://tgxhx.github.io/react-image-zooms/)

[![npm version](https://badge.fury.io/js/react-image-zooms.svg)](https://badge.fury.io/js/react-image-zooms)

[![npm version](https://img.shields.io/npm/dm/react-image-zooms.svg)](https://npmjs.org/package/react-image-zooms)

## Installation

```bash

npm i -S react-image-zooms

```

## Usage

You need to limit the width and height of the image, it's recommended to use a sized container wrapper component.

```css

.image-box {

  width: 200px;

  height: 200px;

}

.image-box img {

  width: 100%;

  height: 100%;

}

```

```javascript

import ImageZooms from 'react-image-zooms';

import 'react-image-zooms/lib/image-zooms.css';



  ;

;

```


## Props

You may want to specify props:

- `src`: `required` - online image url

- `duration`: `optional` - zoom in image takes time, `default: 300`

- `imageBoxSize`: `optional` - the maximum width and height of the enlarged image, `default:500`

## License

Licensed under [MIT](https://opensource.org/licenses/mit-license.php) license.