Skip to content
Simple photo gallery and example app with responsive image grid, columns customizing, one-column view with description, fullscreen preview with one click. Pure CSS for that.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
debug inital commit Mar 18, 2016
example/src InfoElement have default value Jul 14, 2017
library InfoElement have default value Jul 14, 2017
src/components InfoElement have default value Jul 14, 2017
static
.gitignore Add gitignore Aug 28, 2018
README.md Update README.md Jul 14, 2017
index.html inital commit Mar 18, 2016
index.js Reorganize structure of project Jul 8, 2017
package.json Update version Jul 14, 2017
webpack.config.debug.js Reorganize structure of project Jul 8, 2017
webpack.config.library.js
webpack.config.production.js

README.md

react-photo-feed

Photo gallery, example with public photos feed from Flickr, Yandex

Simple example of photo gallery with responsive image grid, columns customizing, one-column view with description, fullscreen preview with one click. Pure CSS for that.

Installation

You can use PhotoGrid in your app, just install it from npm

npm install react-photo-feed

Usage

import React from "react";
import ReactDOM from "react-dom";
import PhotoGrid from "react-photo-feed";
import "react-photo-feed/library/style.css";

const demoPhotos = [
	{
		id : 1, src : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_n.jpg",
		bigSrc : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_b.jpg"
	},
	{
		id : 2, src : "https://farm5.staticflickr.com/4240/35527849422_25a0a67df6_n.jpg",
		bigSrc : "https://farm5.staticflickr.com/4240/35527849422_25a0a67df6_b.jpg"
	},
	{
		id : 3, src : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_n.jpg",
		bigSrc : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_b.jpg"
	},
	{
		id : 4, src : "https://farm5.staticflickr.com/4240/35527849422_25a0a67df6_n.jpg",
		bigSrc : "https://farm5.staticflickr.com/4240/35527849422_25a0a67df6_b.jpg"
	},
	{
		id : 5, src : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_n.jpg",
		bigSrc : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_b.jpg"
	},
	{
		id : 6, src : "https://farm5.staticflickr.com/4240/35527849422_25a0a67df6_n.jpg",
		bigSrc : "https://farm5.staticflickr.com/4240/35527849422_25a0a67df6_b.jpg"
	},
	{
		id : 7, src : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_n.jpg",
		bigSrc : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_b.jpg"
	}
];
ReactDOM.render(
	<div>
		<PhotoGrid columns={3} photos={demoPhotos} />
	</div>,
	document.getElementById('root')
);

Prop Types

Property Type Required? Description
photos Array Array of objects, like [{id: 1, src: 'http://url_to_small_image', bigSrc: 'http://url_to_big_image', title: 'Caption of photo'}]
columns Number Grid columns, like columns={1}, also can be 2,3,5
InformationElement Function Component used for one-column view

Also you can see toggle|radio button group.

<RadioButtonGroup items={sortParams} value={order} onClick={this.onSortClick.bind(this)} type="default"/>

Demo

Preview

Some ideas were inspired by react-rpg

You can’t perform that action at this time.