PhotoSwipe, PhotoSwipeGallery Component for ReactJS Base on PhotoSwipe

React PhotoSwipe

PhotoSwipe, PhotoSwipeGallery component for ReactJS base on PhotoSwipe.

Installation

NPM

npm install --save react-photoswipe

Bower

bower install --save react-photoswipe

Usage

Styles

With webpack:

import 'react-photoswipe/lib/photoswipe.css';

Without webpack:

<link rel="stylesheet" type="text/css" href="path/to/react-photoswipe/lib/photoswipe.css">

JS

PhotoSwipe

import {PhotoSwipe} from 'react-photoswipe';

let isOpen = true;

let items = [
  {
    src: 'http://lorempixel.com/1200/900/sports/1',
    w: 1200,
    h: 900,
    title: 'Image 1'
  },
  {
    src: 'http://lorempixel.com/1200/900/sports/2',
    w: 1200,
    h: 900,
    title: 'Image 2'
  }
];

let options = {
  //http://photoswipe.com/documentation/options.html
};

handleClose = () => {
  isOpen: false
};

<PhotoSwipe isOpen={isOpen} items={items} options={options} onClose={handleClose}/>

PhotoSwipeGallery

import {PhotoSwipeGallery} from 'react-photoswipe';

let items = [
  {
    src: 'http://lorempixel.com/1200/900/sports/1',
    thumbnail: 'http://lorempixel.com/120/90/sports/1',
    w: 1200,
    h: 900,
    title: 'Image 1'
  },
  {
    src: 'http://lorempixel.com/1200/900/sports/2',
    thumbnail: 'http://lorempixel.com/120/90/sports/2',
    w: 1200,
    h: 900,
    title: 'Image 2'
  }
];

let options = {
  //http://photoswipe.com/documentation/options.html
};

getThumbnailContent = (item) => {
  return (
    <img src={item.thumbnail} width={120} height={90}/>
  );
}

<PhotoSwipeGallery items={items} options={options} thumbnailContent={getThumbnailContent}/>

UMD

<link rel="stylesheet" type="text/css" href="path/to/react-photoswipe/dist/photoswipe.css">
<script src="path/to/react-photoswipe/dist/react-photoswipe.js"></script>

var PhotoSwipe = window.ReactPhotoswipe.PhotoSwipe;
var PhotoSwipeGallery = window.ReactPhotoswipe.PhotoSwipeGallery;

Example here

Props

Note: The first argument of every listener is a Photoswipe instance.

EX:

beforeChange(instance, change);
imageLoadComplete(instance, index, item);

PhotoSwipe

Name	Type	Default	Required	Description
isOpen	bool	false	true
items	array	[]	true	http://photoswipe.com/documentation/getting-started.html
options	object	{}	false	http://photoswipe.com/documentation/options.html
onClose	function		false	Callback after PhotoSwipe close
id	string		false
className	string	pswp
beforeChange	function		false	Photoswipe event listener
afterChange	function		false	Photoswipe event listener
imageLoadComplete	function		false	Photoswipe event listener
resize	function		false	Photoswipe event listener
gettingData	function		false	Photoswipe event listener
mouseUsed	function		false	Photoswipe event listener
initialZoomIn	function		false	Photoswipe event listener
initialZoomInEnd	function		false	Photoswipe event listener
initialZoomOut	function		false	Photoswipe event listener
initialZoomOutEnd	function		false	Photoswipe event listener
parseVerticalMargin	function		false	Photoswipe event listener
close	function		false	Photoswipe event listener
unbindEvents	function		false	Photoswipe event listener
destroy	function		false	Photoswipe event listener
updateScrollOffset	function		false	Photoswipe event listener
preventDragEvent	function		false	Photoswipe event listener
shareLinkClick	function		false	Photoswipe event listener

PhotoSwipeGallery

Name	Type	Default	Required	Description
items	array	[]	true	http://photoswipe.com/documentation/getting-started.html
options	object	{}	false	http://photoswipe.com/documentation/options.html
thumbnailContent	function	<img src={item.src} width='100' height='100'/>	false	Thumbnail content
isOpen	bool	false	false	Use it with onClose prop
onClose	function		false	Callback after close
id	string		false
className	string	pswp-gallery
beforeChange	function		false	Photoswipe event listener
afterChange	function		false	Photoswipe event listener
imageLoadComplete	function		false	Photoswipe event listener
resize	function		false	Photoswipe event listener
gettingData	function		false	Photoswipe event listener
mouseUsed	function		false	Photoswipe event listener
initialZoomIn	function		false	Photoswipe event listener
initialZoomInEnd	function		false	Photoswipe event listener
initialZoomOut	function		false	Photoswipe event listener
initialZoomOutEnd	function		false	Photoswipe event listener
parseVerticalMargin	function		false	Photoswipe event listener
close	function		false	Photoswipe event listener
unbindEvents	function		false	Photoswipe event listener
destroy	function		false	Photoswipe event listener
updateScrollOffset	function		false	Photoswipe event listener
preventDragEvent	function		false	Photoswipe event listener
shareLinkClick	function		false	Photoswipe event listener

Demo

View demo or example folder.

Download Details:

Author: minhtranite

Demo: https://photoswipe.com/

Source Code: https://github.com/minhtranite/react-photoswipe

#react #reactjs #javascript

What is GEEK

Buddha Community

PhotoSwipe, PhotoSwipeGallery Component for ReactJS Base on PhotoSwipe

React PhotoSwipe

PhotoSwipe, PhotoSwipeGallery component for ReactJS base on PhotoSwipe.

Installation

NPM

npm install --save react-photoswipe

Bower

bower install --save react-photoswipe

Usage

Styles

With webpack:

import 'react-photoswipe/lib/photoswipe.css';

Without webpack:

<link rel="stylesheet" type="text/css" href="path/to/react-photoswipe/lib/photoswipe.css">

JS

PhotoSwipe

import {PhotoSwipe} from 'react-photoswipe';

let isOpen = true;

let items = [
  {
    src: 'http://lorempixel.com/1200/900/sports/1',
    w: 1200,
    h: 900,
    title: 'Image 1'
  },
  {
    src: 'http://lorempixel.com/1200/900/sports/2',
    w: 1200,
    h: 900,
    title: 'Image 2'
  }
];

let options = {
  //http://photoswipe.com/documentation/options.html
};

handleClose = () => {
  isOpen: false
};

<PhotoSwipe isOpen={isOpen} items={items} options={options} onClose={handleClose}/>

PhotoSwipeGallery

import {PhotoSwipeGallery} from 'react-photoswipe';

let items = [
  {
    src: 'http://lorempixel.com/1200/900/sports/1',
    thumbnail: 'http://lorempixel.com/120/90/sports/1',
    w: 1200,
    h: 900,
    title: 'Image 1'
  },
  {
    src: 'http://lorempixel.com/1200/900/sports/2',
    thumbnail: 'http://lorempixel.com/120/90/sports/2',
    w: 1200,
    h: 900,
    title: 'Image 2'
  }
];

let options = {
  //http://photoswipe.com/documentation/options.html
};

getThumbnailContent = (item) => {
  return (
    <img src={item.thumbnail} width={120} height={90}/>
  );
}

<PhotoSwipeGallery items={items} options={options} thumbnailContent={getThumbnailContent}/>

UMD

<link rel="stylesheet" type="text/css" href="path/to/react-photoswipe/dist/photoswipe.css">
<script src="path/to/react-photoswipe/dist/react-photoswipe.js"></script>

var PhotoSwipe = window.ReactPhotoswipe.PhotoSwipe;
var PhotoSwipeGallery = window.ReactPhotoswipe.PhotoSwipeGallery;

Example here

Props

Note: The first argument of every listener is a Photoswipe instance.

EX:

beforeChange(instance, change);
imageLoadComplete(instance, index, item);

PhotoSwipe

Name	Type	Default	Required	Description
isOpen	bool	false	true
items	array	[]	true	http://photoswipe.com/documentation/getting-started.html
options	object	{}	false	http://photoswipe.com/documentation/options.html
onClose	function		false	Callback after PhotoSwipe close
id	string		false
className	string	pswp
beforeChange	function		false	Photoswipe event listener
afterChange	function		false	Photoswipe event listener
imageLoadComplete	function		false	Photoswipe event listener
resize	function		false	Photoswipe event listener
gettingData	function		false	Photoswipe event listener
mouseUsed	function		false	Photoswipe event listener
initialZoomIn	function		false	Photoswipe event listener
initialZoomInEnd	function		false	Photoswipe event listener
initialZoomOut	function		false	Photoswipe event listener
initialZoomOutEnd	function		false	Photoswipe event listener
parseVerticalMargin	function		false	Photoswipe event listener
close	function		false	Photoswipe event listener
unbindEvents	function		false	Photoswipe event listener
destroy	function		false	Photoswipe event listener
updateScrollOffset	function		false	Photoswipe event listener
preventDragEvent	function		false	Photoswipe event listener
shareLinkClick	function		false	Photoswipe event listener

PhotoSwipeGallery

Name	Type	Default	Required	Description
items	array	[]	true	http://photoswipe.com/documentation/getting-started.html
options	object	{}	false	http://photoswipe.com/documentation/options.html
thumbnailContent	function	<img src={item.src} width='100' height='100'/>	false	Thumbnail content
isOpen	bool	false	false	Use it with onClose prop
onClose	function		false	Callback after close
id	string		false
className	string	pswp-gallery
beforeChange	function		false	Photoswipe event listener
afterChange	function		false	Photoswipe event listener
imageLoadComplete	function		false	Photoswipe event listener
resize	function		false	Photoswipe event listener
gettingData	function		false	Photoswipe event listener
mouseUsed	function		false	Photoswipe event listener
initialZoomIn	function		false	Photoswipe event listener
initialZoomInEnd	function		false	Photoswipe event listener
initialZoomOut	function		false	Photoswipe event listener
initialZoomOutEnd	function		false	Photoswipe event listener
parseVerticalMargin	function		false	Photoswipe event listener
close	function		false	Photoswipe event listener
unbindEvents	function		false	Photoswipe event listener
destroy	function		false	Photoswipe event listener
updateScrollOffset	function		false	Photoswipe event listener
preventDragEvent	function		false	Photoswipe event listener
shareLinkClick	function		false	Photoswipe event listener

Demo

View demo or example folder.

Download Details:

Author: minhtranite

Demo: https://photoswipe.com/

Source Code: https://github.com/minhtranite/react-photoswipe

#react #reactjs #javascript

ReactJS Development Company USA | ReactJS Web Development Company

ByteCipher is one of the leading React JS app development Companies. We offer innovative, efficient and high performing app solutions. As a ReactJS web development company, ByteCipher is providing services for customized web app development, front end app development services, astonishing react to JS UI/UX development and designing solutions, reactJS app support and maintenance services, etc.

#reactjs development company usa #reactjs web development company #reactjs development company in india #reactjs development company india #reactjs development india

Top React JS App Development Company in USA | React JS Services

Hire ReactJS app developers for end-to-end services starting from development to customization with AppClues Infotech.

Are you looking for the best company in USA that provides high-quality ReactJS app development services? Having expertise in building robust and real-time mobile apps using React Native Library.

We can fully support your specific business idea with outstanding tech skills and deliver a perfect mobile app on time.

Our ReactJS App Development Services
• Custom ReactJS Development
• ReactJS Consulting
• React UX/UI development and design
• App modernization using React
• React Native mobile development
• Dedicated React development team
• Application migration to React

For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910

#top reactjs app development company in usa #hire best reactjs app developers #best reactjs app development services #custom reactjs app development agency #how to develop reactjs app #cost to build reactjs application

Why ReactJS is better for Web Application Development?

Web Application Development is essential for a business in today’s digital era. Finding the right platform for Web Application Development is important for building an effective Web Application that can enhance the overall customer engagement. Here’s what makes ReactJS a better option for building your next Web Application.

#Why ReactJS is better for Web Application Development #Benefits of ReactJS #What is ReactJS? #ReactJS vs AngularJS

Epic Games Store ReactJS UI -NextJS, MaterialUI, ReactJS, TypeScript -Login Form Design #5

Hi, in this series we will try to build fullstack application with NestJS, NextJS, ReactJS, PostgreSQL and TypeScript. My aim is to build something bigger and more interesting. Features like authorization or using database are always tricky so I think it’s good to implement on your own to understand how they work. We will build both API and web application. Our app is a funny little approach to mimic something like a game library and we will try to recreate Epic Games Store.

Have you ever wondered how are real app design and written? In this series I will try to reproduce at least some functionalities of Epic Games Store. In the fifth episode I am recreating the login form. We’ll use NextJS, MaterialUI, ReactJS and TypeScript.

You can find me here:

https://twitter.com/wojciech_bilick
https://medium.com/@wojciech.bilicki
https://github.com/wojciech-bilicki

---

ignore

nextjs
materialui
reactjs
typescript
web design
html
web development
css
html5
css3
es6
programming
basics
tutorial
javascript
how to make a website
responsive design tutorial
web development tutorial
media queries
website from scratch
html css
responsive website tutorial
responsive web development
web developer
how to make a responsive website
how to build a website from scratch
how to build a website
build a website
How to

#reactjs ui #reactjs #materialui #nextjs #typescript #reactjs