https://github.com/minjieliu/react-photo-view

An exquisite React photo preview component.
https://github.com/minjieliu/react-photo-view

gallery gallery-images image image-preview image-swipe photo photo-swipe react react-component

Last synced: about 1 month ago
JSON representation

An exquisite React photo preview component.

• Host: GitHub
• URL: https://github.com/minjieliu/react-photo-view
• Owner: MinJieLiu
• License: apache-2.0
• Created: 2018-09-03T01:30:40.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2024-01-02T15:53:55.000Z (11 months ago)
• Last Synced: 2024-04-13T21:09:13.708Z (7 months ago)
• Topics: gallery, gallery-images, image, image-preview, image-swipe, photo, photo-swipe, react, react-component
• Language: TypeScript
• Homepage: https://react-photo-view.vercel.app
• Size: 19.2 MB
• Stars: 1,338
• Watchers: 8
• Forks: 114
• Open Issues: 37
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-photo-view

**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]

![example](./example.gif)

## Quick start

- [Getting Started](https://react-photo-view.vercel.app)

- [Basic usage](https://react-photo-view.vercel.app/docs/getting-started)

- [API](https://react-photo-view.vercel.app/docs/api)

- [Change log](https://react-photo-view.vercel.app/docs/change-log)

## 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, perfect for desktop

- Support custom node expansion, easy to achieve full-screen preview, rotation control, picture introduction and more functions

- Based on `typescript`, `7KB Gzipped`, supports server-side rendering

- Simple and easy to use `API`, zero cost to get started

## Install

```bash

yarn add react-photo-view

```

## Basic usage:

```js

import { PhotoProvider, PhotoView } from 'react-photo-view';

import 'react-photo-view/dist/react-photo-view.css';

function App() {

  return (

    

      

        

      

    

  );

}

```

## License

Apache-2.0 © [MinJieLiu](https://github.com/MinJieLiu)

[npm-image]: https://img.shields.io/npm/v/react-photo-view.svg?style=flat-square

[npm-url]: https://npmjs.org/package/react-photo-view

[downloads-image]: http://img.shields.io/npm/dm/react-photo-view.svg?style=flat-square

[downloads-url]: https://npmjs.org/package/react-photo-view

[min-size-image]: https://badgen.net/bundlephobia/min/react-photo-view?label=minified

[gzip-size-image]: https://badgen.net/bundlephobia/minzip/react-photo-view?label=gzip

[bundlephobia-url]: https://bundlephobia.com/result?p=react-photo-view