https://github.com/infeng/react-viewer-mobile

react image viewer for mobile https://infeng.github.io/react-viewer-mobile/
https://github.com/infeng/react-viewer-mobile

gallery image react

Last synced: 3 months ago
JSON representation

react image viewer for mobile https://infeng.github.io/react-viewer-mobile/

• Host: GitHub
• URL: https://github.com/infeng/react-viewer-mobile
• Owner: infeng
• License: mit
• Created: 2017-02-06T01:48:35.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2022-11-02T18:33:47.000Z (over 2 years ago)
• Last Synced: 2024-10-31T15:48:01.684Z (3 months ago)
• Topics: gallery, image, react
• Language: TypeScript
• Homepage:
• Size: 1.72 MB
• Stars: 13
• Watchers: 2
• Forks: 2
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-viewer-mobile

react image viewer for mobile

## Introduction

[react-viewer](https://github.com/infeng/react-viewer) for mobile.

## Installation

```bash

npm install react-viewer-mobile --save

```

## Usage

```javascript

import * as React from 'react';

import Viewer from 'react-viewer-mobile';

import 'react-viewer-mobile/dist/index.css';

class App extends React.Component {

  constructor() {

    super();

    this.state = {

      visible: false,

    };

  }

  render() {

    return (

      


         { this.setState({ visible: !this.state.visible }); } }>show

        

      

    );

  }

}

```


## Props

| props       | type         | default | description                 | required |

|-------------|--------------|---------|-----------------------------|----------|

| visible     | string       |  false  | Viewer visible             | true |

| images      | {src: string, alt: string}[]     | []      | image source array | true  |

| activeIndex | number       | 0       | active image index | false |

| zIndex      | number       | 1000    | Viewer css z-index | false |

## Gesture support

- slide

- pinch

## License

MIT