https://github.com/isy/photoswipe-react

Typesafe PhotoSwipe-based React wrapper component
https://github.com/isy/photoswipe-react

photoswipe react typescript

Last synced: 5 months ago
JSON representation

Typesafe PhotoSwipe-based React wrapper component

• Host: GitHub
• URL: https://github.com/isy/photoswipe-react
• Owner: isy
• License: mit
• Created: 2020-06-09T15:22:02.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T18:59:23.000Z (over 3 years ago)
• Last Synced: 2025-09-30T01:03:09.587Z (9 months ago)
• Topics: photoswipe, react, typescript
• Language: CSS
• Homepage:
• Size: 2.76 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# PhotoSwipe React

Typesafe [PhotoSwipe](https://github.com/dimsemenov/PhotoSwipe)-based React wrapper component.

This is inspired by [react-photoswipe](https://github.com/minhtranite/react-photoswipe) and reworked.

## Installation

```bash

# NPM

npm install photoswipe-react

# YARN

yarn add photoswipe-react

```

## Basic Usage

### Styles

Style file combining photoswipe's Core CSS file and Skin CSS file

```javascript

import 'photoswipe-react/dist/photoswipe.css'

```

### Quickstart

```tsx

import React, { useState } from 'react'

import PhotoSwipe, { PhotoSwipeOptions } from 'photoswipe-react'

import 'photoswipe-react/photoswipe.css'

const items = [

  {

      src: 'https://placekitten.com/600/400',

      w: 600,

      h: 400

  },

  {

      src: 'https://placekitten.com/1200/900',

      w: 1200,

      h: 900

  }

]

const options: PhotoSwipeOptions = {}

const App: React.FC = () => {

  const [isOpen, setIsOpen] = useState(false)

  const onToggle = () => setIsOpen((isOpen) => !isOpen)

  const onClose = () => setIsOpen(false)

  return (

    


      toggle

      

    

  )

}

```