https://github.com/big-camel/react-image-previewer
An exquisite React photo preview component.
https://github.com/big-camel/react-image-previewer
image-previewer images-viewer photo-gallery react-previewer react-viewer viewerjs
Last synced: about 1 month ago
JSON representation
An exquisite React photo preview component.
- Host: GitHub
- URL: https://github.com/big-camel/react-image-previewer
- Owner: big-camel
- License: apache-2.0
- Created: 2022-12-27T16:52:27.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-01-01T14:19:02.000Z (over 2 years ago)
- Last Synced: 2025-04-24T00:04:36.621Z (about 1 month ago)
- Topics: image-previewer, images-viewer, photo-gallery, react-previewer, react-viewer, viewerjs
- Language: TypeScript
- Homepage: https://react-image-previewer-example.vercel.app
- Size: 18.4 MB
- Stars: 8
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
> ### This warehouse is forked from https://github.com/MinJieLiu/react-photo-view
> ### Since the update of [react-photo-view](https://github.com/MinJieLiu/react-photo-view) is no longer timely, this repository was created.
> ### You can see this pr https://github.com/MinJieLiu/react-photo-view/pull/140 for the updated content of this warehouse
# react-image-previewer
**English** | [中文](./README.zh-CN.md)
**An exquisite React photo preview component.**
[![NPM version][npm-image]][npm-url]
[![Downloads][downloads-image]][downloads-url]
[![Minified size][min-size-image]][bundlephobia-url]
[![Gzip size][gzip-size-image]][bundlephobia-url]
## Quick start
- [Getting Started](https://react-image-previewer-example.vercel.app)
- [Basic usage](https://react-image-previewer-example.vercel.app/docs/getting-started)
- [API](https://react-image-previewer-example.vercel.app/docs/api)
- [Change log](https://github.com/big-camel/react-image-previewer/blob/master/packages/core/CHANGELOG.md)
## Features
- Support touch gestures, drag and pan physical effect sliding, two-finger specified position to zoom in and out
- All aspects of animation connection, open and close the rebound touch edge, let the natural interaction effect
- The image is adaptive, with a suitable initial rendering size, and adapts according to the adjustment
- Support for custom previews like `` or any `HTML` element
- Keyboard navigation, drag mode **supports free dragging in the view, zooming according to the size of the picture**, perfectly adapted to the desktop
- Support custom node expansion, easy to achieve full-screen preview, rotation control, picture introduction and more functions
- Toolbar UI components are separated, and custom toolbars are supported
- Based on `typescript`, supports server-side rendering
- Simple and easy to use `API`, zero cost to get started
## Install
```bash
yarn add react-image-previewer
```
## Basic usage:
```js
import { PhotoProvider, PhotoView } from 'react-image-previewer';
import { SlideToolbar, CloseButton } from 'react-image-previewer/ui';
function App() {
return (
);
}
```
## Use the built-in toolbar:
```js
import { PhotoProvider, PhotoView } from 'react-image-previewer';
import { SlideToolbar, CloseButton } from 'react-image-previewer/ui';
function App() {
return (
{
const { onClose } = props
return (
<>
>
)
}}>
);
}
```
## License
Apache-2.0 © [MinJieLiu](https://github.com/MinJieLiu)
[npm-image]: https://img.shields.io/npm/v/react-image-previewer.svg?style=flat-square
[npm-url]: https://npmjs.org/package/react-image-previewer
[downloads-image]: http://img.shields.io/npm/dm/react-image-previewer.svg?style=flat-square
[downloads-url]: https://npmjs.org/package/react-image-previewer
[min-size-image]: https://badgen.net/bundlephobia/min/react-image-previewer?label=minified
[gzip-size-image]: https://badgen.net/bundlephobia/minzip/react-image-previewer?label=gzip
[bundlephobia-url]: https://bundlephobia.com/result?p=react-image-previewer